溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery如何實(shí)現(xiàn)百葉窗效果

發(fā)布時(shí)間：2021-10-19 17:07:01 來源：億速云 閱讀：117 作者：小新 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)jquery如何實(shí)現(xiàn)百葉窗效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

大概思路：

一個(gè)div（寬度為800px），里面包含ul和li，li的寬高分別設(shè)置為560px，300px（li里的圖片也是這個(gè)寬高）。li設(shè)置絕對(duì)定位，div設(shè)置相對(duì)定位。
.no0{ left:0; }
.no1{ left:160px; }
.no2{ left:320px; }
.no3{ left:480px; }
.no4{ left: 640px; }
不動(dòng)畫的時(shí)候，每個(gè)li寬高為160px。（800/5=160 div的寬度/圖片個(gè)數(shù)）
動(dòng)畫的時(shí)候，被鼠標(biāo)進(jìn)入的li寬高為560px，300px，把圖片完全顯示出來。其他未被鼠標(biāo)進(jìn)入的圖片，寬度為（800-560）/4=160px
當(dāng)鼠標(biāo)出去box框的話，各個(gè)圖片回復(fù)最初的位置。

代碼：

<!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");
//當(dāng)鼠標(biāo)進(jìn)入圖1的時(shí)候，圖1到圖4往右邊動(dòng)畫
  $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);
  });
//當(dāng)鼠標(biāo)進(jìn)入圖2的時(shí)候，圖2往左邊動(dòng)畫，圖3到圖4往右邊動(dòng)畫
$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);

});


//鼠標(biāo)離開box的時(shí)候，各個(gè)圖片返回原來的位置
    $(".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>

運(yùn)行結(jié)果：

jquery如何實(shí)現(xiàn)百葉窗效果

jquery如何實(shí)現(xiàn)百葉窗效果

代碼簡(jiǎn)化：

<!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();
// 當(dāng)圖片在被鼠標(biāo)進(jìn)入圖片的左側(cè)的時(shí)候，往左邊動(dòng)畫。在右邊是，往右邊動(dòng)畫
        $lis.each(function(i){
            if(i <= index){
                $(this).animate({left:60*i},1000);
            }else{
                $(this).animate({left:560+60*(i-1)},1000);
            }
        })
    })

//鼠標(biāo)離開box的時(shí)候，各個(gè)圖片返回原來的位置
  $(".box").mouseleave(function(){
    $lis.stop(true);
      $lis.each( function(i){
          $(this).animate({left:160*i},1000);
      });

});



</script>

</body>
</html>

關(guān)于“jquery如何實(shí)現(xiàn)百葉窗效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手