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

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

你可能感兴趣的:(图片)