jquery实现百叶窗效果(利用li的定位)

177 阅读 0 评论 117 点赞

我是靠谱客的博主清秀高山，最近开发中收集的这篇文章主要介绍jquery实现百叶窗效果(利用li的定位)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了jquery实现百叶窗效果的具体代码，供大家参考，具体内容如下

大概思路：

一个div（宽度为800px），里面包含ul和li，li的宽高分别设置为560px，300px（li里的图片也是这个宽高）。li设置绝对定位，div设置相对定位。
.no0{ left:0; }
.no1{ left:160px; }
.no2{ left:320px; }
.no3{ left:480px; }
.no4{ left: 640px; }
不动画的时候，每个li宽高为160px。（800/5=160 div的宽度/图片个数）
动画的时候，被鼠标进入的li宽高为560px，300px，把图片完全显示出来。其他未被鼠标进入的图片，宽度为（800-560）/4=160px
当鼠标出去box框的话，各个图片回复最初的位置。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
        overflow: hidden;
    }
    .box{
        width:800px;
        height:300px;
        border:5px solid gray;
        margin:100px auto;
        position: relative;
    }
    li{
        list-style: none;
        float: left;
        position:absolute;
        /*width:160px;*/
        height:300px;
        width:560px;
    }
    .no0{  left:0;  }
    .no1{  left:160px;  }
    .no2{  left:320px;  }
    .no3{  left:480px;  }
    .no4{  left: 640px;  }

    img{
        width:560px;
        height:300px;
    }

</style>
<body>
<div class="box">
    <ul>
        <li class="no0"> <img src="img/0.jpg" alt=""> </li>
        <li  class="no1">  <img src="img/1.jpg" alt=""> </li>
        <li  class="no2">  <img src="img/2.jpg" alt=""> </li>
        <li  class="no3">  <img src="img/3.jpg" alt=""> </li>
        <li  class="no4">  <img src="img/4.jpg" alt=""> </li>
    </ul>
</div>


<script src="js/jquery-1.12.3.min.js"> </script>
<script>
    
//    最初的位置 0 160 320 480 640
//    最左边的位置 0 60 120 180 240
//最右边位置：0 560 620 680 740
$lis = $("li");
//当鼠标进入图1的时候，图1到图4往右边动画
  $lis.eq(0).mouseenter(function(){
      $lis.stop(true);
      $lis.eq(1).animate({left:560},1000);
      $lis.eq(2).animate({left:620},1000);
      $lis.eq(3).animate({left:680},1000);
     $lis.eq(4).animate({left:740},1000);
  });
//当鼠标进入图2的时候，图2往左边动画，图3到图4往右边动画
$lis.eq(1).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:620},1000);
    $lis.eq(3).animate({left:680},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(2).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:680},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(3).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:180},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(4).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:180},1000);
    $lis.eq(4).animate({left:240},1000);

});


//鼠标离开box的时候，各个图片返回原来的位置
    $(".box").mouseleave(function(){
        $lis.stop(true);
        $lis.eq(1).animate({left:160},1000);
        $lis.eq(2).animate({left:320},1000);
        $lis.eq(3).animate({left:480},1000);
        $lis.eq(4).animate({left:640},1000);
    })

</script>
</body>
</html>

运行结果：

代码简化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
        overflow: hidden;
    }
    .box{
        width:800px;
        height:300px;
        border:5px solid gray;
        margin:100px auto;
        position: relative;
    }
    li{
        list-style: none;
        float: left;
        position:absolute;
        width:560px;
        height:300px;
    }
    .no0{  left:0;  }
    .no1{  left:160px;  }
    .no2{  left:320px;  }
    .no3{  left:480px;  }
    .no4{  left: 640px;  }

    img{
        width:560px;
        height:300px;
    }

</style>
<body>
<div class="box">
    <ul>
        <li class="no0"> <img src="img/0.jpg" alt=""> </li>
        <li  class="no1">  <img src="img/1.jpg" alt=""> </li>
        <li  class="no2">  <img src="img/2.jpg" alt=""> </li>
        <li  class="no3">  <img src="img/3.jpg" alt=""> </li>
        <li  class="no4">  <img src="img/4.jpg" alt=""> </li>
    </ul>
</div>

<script src="js/jquery-1.12.3.min.js"></script>
<script>
//    最初的位置 0 160 320 480 640
//    最左边的位置 0 60 120 180 240
//最右边位置：0 560 620 680 740


    $lis = $("li");
    $lis.mouseenter(function(){
        $lis.stop(true);
        console.log( $(this).index());
        var index = $(this).index();
// 当图片在被鼠标进入图片的左侧的时候，往左边动画。在右边是，往右边动画
        $lis.each(function(i){
            if(i <= index){
                $(this).animate({left:60*i},1000);
            }else{
                $(this).animate({left:560+60*(i-1)},1000);
            }
        })
    })

//鼠标离开box的时候，各个图片返回原来的位置
  $(".box").mouseleave(function(){
    $lis.stop(true);
      $lis.each( function(i){
          $(this).animate({left:160*i},1000);
      });

});



</script>

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。