一个支持任意尺寸的图片上下左右滑动效果

时间：2021-05-25

常常遇到图片通过后台上传后就变形了的问题，如果你的网站风格适合，可以用这种方式来给页面布局，支持任意尺寸的图片滑动（上下左右滑动）

<! DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>任意尺寸的图片滑动</title><style>div { margin: 0 auto; 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><script src="js/jquery-1.10.2.min.js"></script><script>$(document).ready(function(e) {$(".divimg .img").load(function(){var w=parseInt($(this).width());var h=parseInt($(this).height());var hh=$(this).parent().height();var ww=$(this).parent().width();var blw=w/parseInt(ww);var blh=h/parseInt(hh);function left(){$(this).animate({left:-(parseInt(parseInt(hh)/h*w)-(parseInt(ww)))},10000,right)}function right(){$(this).animate({left:0},10000,left);}function top(){$(this).animate({top:-(parseInt(parseInt(ww)/w*h)-(parseInt(hh)))},10000,bottom);}function bottom(){$(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);}else if(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><div class="main"><div class="divimg"><div class="divimg_div1"><div class="divimg_title">任意尺寸的图片滑动</div><div class="divimg_img1"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_bigimg01.jpg" src="" /> </div></div><div class="divimg_div2"><div class="divimg_img2"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_nyimg01.jpg" src="" /> </div><div class="divimg_img3"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_img02.jpg" src="" /> </div><div class="divimg_img4"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_newimg01.jpg" src="" /> </div><div class="divimg_img5"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_rynewimg03.jpg" src="" /> </div></div></div></div></body></html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章