一个支持任意尺寸的图片上下左右滑动效果
常常遇到图片通过后台上传后就变形了的问题,如果你的网站风格适合,可以用这种方式来给页面布局,支持任意尺寸的图片滑动(上下左右滑动)
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>任意尺寸的图片滑动</title> <style> div{margin:0auto;overflow:hidden;} .main{width:1000px;} .divimg_div1{width:380px;float:left;} .divimg.div4_title{width:380px;height:103px;background-color:#EDB205;color:#FFF;font-family:"微软雅黑";font-size:22px;font-weight:bold;line-height:90px;text-align:center;letter-spacing:5px;} .divimg_img1{width:380px;height:414px;margin-top:5px;background-color:#FFF;position:relative;} .divimg_div2{width:615px;float:right;} .divimg_img2{width:194px;height:256px;float:left;background-color:#FFF;position:relative;} .divimg_img3{width:417px;height:256px;float:right;background-color:#FFF;position:relative;} .divimg_img4{width:366px;height:262px;float:left;margin-top:4px;background-color:#FFF;position:relative;} .divimg_img5{width:245px;height:262px;float:right;margin-top:4px;background-color:#FFF;position:relative;} .divimg.gif{position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;z-index:2;} .divimg.img{position:absolute;z-index:1;left:0;top:0;display:none;} </style> <scriptsrc="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(e){ $(".divimg.img").load(function(){ varw=parseInt($(this).width()); varh=parseInt($(this).height()); varhh=$(this).parent().height(); varww=$(this).parent().width(); varblw=w/parseInt(ww); varblh=h/parseInt(hh); functionleft(){ $(this).animate({left:-(parseInt(parseInt(hh)/h*w)-(parseInt(ww)))},10000,right) } functionright(){ $(this).animate({left:0},10000,left); } functiontop(){ $(this).animate({top:-(parseInt(parseInt(ww)/w*h)-(parseInt(hh)))},10000,bottom); } functionbottom(){ $(this).animate({top:0},10000,top); } if(blw>blh) { $(this).height(hh).width(parseInt(parseInt(hh)/h*w)); $(this).prev().hide(); $(this).css({"z-index":"3","display":"block"}); $(this).animate({left:-(parseInt(parseInt(hh)/h*w)-(parseInt(ww)))},10000,right); } elseif(blw<blh) { $(this).height(parseInt(parseInt(ww)/w*h)).width(ww); $(this).prev().hide(); $(this).css({"z-index":"3","display":"block"}); $(this).animate({top:-(parseInt(parseInt(ww)/w*h)-(parseInt(hh)))},10000,bottom); } }); $(".div4.img").each(function(index,element){ $(this).attr("src",$(this).attr("name")); }); }); </script> </head> <body> <divclass="main"> <divclass="divimg"> <divclass="divimg_div1"> <divclass="divimg_title">任意尺寸的图片滑动</div> <divclass="divimg_img1"><imgclass="gif"src="images/loadding.gif"width="100"height="100"/><imgclass="img"name="images/am_bigimg01.jpg"src=""/></div> </div> <divclass="divimg_div2"> <divclass="divimg_img2"><imgclass="gif"src="images/loadding.gif"width="100"height="100"/><imgclass="img"name="images/am_nyimg01.jpg"src=""/></div> <divclass="divimg_img3"><imgclass="gif"src="images/loadding.gif"width="100"height="100"/><imgclass="img"name="images/am_img02.jpg"src=""/></div> <divclass="divimg_img4"><imgclass="gif"src="images/loadding.gif"width="100"height="100"/><imgclass="img"name="images/am_newimg01.jpg"src=""/></div> <divclass="divimg_img5"><imgclass="gif"src="images/loadding.gif"width="100"height="100"/><imgclass="img"name="images/am_rynewimg03.jpg"src=""/></div> </div> </div> </div> </body> </html>