首页 > 代码库 > 一种支持任意尺寸的图片滑动（上下左右滑动）效果

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

2024-07-04 20:27:03   227人阅读

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


联系
我们