最新分享 » 网页技术 » 自适应略缩图代码,再加以扩展

自适应略缩图代码,再加以扩展

时间:2009-6-5 作者:天空下的雨 分类: 网页技术 评论:0 浏览:4727

天空下的雨:今天刚好碰到这样一个问题,一个图片展示的页面,由于图片过大,把网页给撑开了,这样及其影响页面美观。如果设置固定的宽度和高度,图片又会不好看。于是,参考了网上的代码,加以改进 ,并 用Ajax加入了预载入效果。完美解决此类问题。

loading11

loading12

<style type="text/css">
PhotoLoad {
 overflow:hidden;width:180px;height:125px;margin:10px auto 0px auto;border:1px #cccccc solid;text-align:center
}
.PhotoLoad_1 {
 overflow:hidden;width:180px;height:125px;margin:10px auto 0px auto;border:1px #6C6 solid;text-align:center
}
</style>
<script type="text/javascript">
function $(obj){return document.getElementById(obj)}
function SImg(ImgId,_W,_H){window.setTimeout("InfoImgNow('"+ImgId+"',"+_W+","+_H+")",500)}
function InfoImgNow(ImgId,_W,_H) {
if(!$(ImgId))return;
var ImgUrl=$(ImgId).src;
var IW=$(ImgId).width;
var IH=$(ImgId).height;
if(IW>_W){
 IW=_W;
 IH=_W/$(ImgId).width*IH;
 }
if(IH>_H){
 IH=_H;
 IW=_H/$(ImgId).height*$(ImgId).width;
 }
if(IH<_H){
 if(!$(ImgId+"_Div"))return;
 var MT=(_H-IH)/2;
 $(ImgId+"_Div").innerHTML="<img src='"+ImgUrl+"' style='width:"+IW+"px;height:"+IH+"px;margin-top:"+MT+"px' oncontextmenu='return false'>";
 }else{
 $(ImgId+"_Div").innerHTML="<img src='"+ImgUrl+"' style='width:"+IW+"px;height:"+IH+"px' oncontextmenu='return false'></a>";
 }
}
</script>

<div id='Photo[page:i]_Div' class='PhotoLoad' onclick="window.open('链接网址')" onmouseover="this.className='PhotoLoad_1'" onmouseout="this.className='PhotoLoad'"><img src='style/photoload.gif' /><a href="[page:aurl]" title="[page:titlex]" target="_blank"><img id='Photo[page:i]' src='[page:Indexpic]' onload='SImg(this.id,180,125)' onerror="this.src='style/noerror.gif'"></a>
</div>
/*[page:i] 图片编号(div img 要一致)*/
载入图片文件:

photoload