Rumah > hujung hadapan web > tutorial js > 用js 让图片在 div或dl里 居中,底部对齐_图象特效

用js 让图片在 div或dl里 居中,底部对齐_图象特效

WBOY
Lepaskan: 2016-05-16 19:06:32
asal
1367 orang telah melayarinya

解决图片长宽大于容器,一边长一边宽,小于容器
在ff,ie里都通过
这里是js代码:

复制代码 代码如下:


 
   脚本之家 www.jb51.net New Document 
  
  
  
  
  
 <script></script>
 <script> <BR> <!-- <BR> imgsrc={ <BR> vh:'161', //高 <BR> vw:'209', //宽 <br><br> addEvent: function(elm, evType, fn, useCapture){ <BR> if (elm.addEventListener){ <BR> elm.addEventListener(evType, fn, useCapture); <BR> return true; <BR> } else if (elm.attachEvent) { <BR> var r = elm.attachEvent('on' + evType, fn); <BR> return r; <BR> } else { <BR> elm['on' + evType] = fn; <BR> } <BR> }, <BR> init:function() <BR> { <BR> var divn=document.getElementById("pic") <BR> var dln=divn.getElementsByTagName("dl") <BR> for (var i=0;i<dln.length ;i++) { <BR> var dtn=dln[i].getElementsByTagName("dt"); <BR> var imgn=dtn[0].getElementsByTagName("img"); <br><br> <BR> if(imgn[0].height>imgsrc.vh||imgn[0].width>imgsrc.vw) <BR> { <BR> if(imgn[0].height/imgsrc.vh > imgn[0].width/imgsrc.vw) <BR> { <BR> imgn[0].heigh=imgsrc.vh <BR> imgn[0].width=imgsrc.vh/imgn[0].height*imgn[0].width <BR> } <BR> else <BR> { <BR> imgn[0].width=imgsrc.vw <BR> imgn[0].heigh=imgsrc.vw/imgn[0].width*imgn[0].heigh <BR> } <br><br> } <BR> if(imgsrc.vh-imgn[0].height>0) <BR> { <BR> var hh=(imgsrc.vh-imgn[0].height)/2 <BR> imgn[0].style.margin=hh+" 0px 0px 0px" <BR> } <br><br> <br><br> } <BR> } <br><br> } <BR> imgsrc.addEvent(window,"load",imgsrc.init,false) <BR> //--> <BR> </script>

 
 


用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1




用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1



用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1




用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1




用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1




用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1




用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1




用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1




用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1




用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1




用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1




用js 让图片在 div或dl里 居中,底部对齐_图象特效

图片1







 



包太大上传不了,我把html文件放上来,自己放图片看看就行了

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan