bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

jQuery如何實現圖片推拉門動畫效果

這篇文章主要介紹了jQuery如何實現圖片推拉門動畫效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創新互聯是一家成都網站設計、網站建設，提供網頁設計，網站設計，網站制作，建網站，定制網站，網站開發公司，成立于2013年是互聯行業建設者，服務者。以提升客戶品牌價值為核心業務，全程參與項目的網站策劃設計制作，前端開發，后臺程序制作以及后期項目運營并提出專業建議和思路。

實現方法一：改變圖片寬度

html+css代碼

<body>
  <div class="box">
    <ul>
      <!-- <li>![](images/slidepic2.jpg)</li> -->
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
<style>
    *{
      padding: 0;
      margin: 0;
    }
    .box{
      /*收縮狀態:縮放時每個圖片的大小240px 所以總大小1200px*/
      /*展開狀態:當前圖片寬度800px 其他圖片寬度100px*/
      width: 1200px;
      height: 500px;
      border:1px solid red;
      margin: 50px auto;
    }
    .box ul{
      list-style: none;
      width: 1210px;
    }
    /*設置每一張圖片的大小和float: left*/
    .box ul li{
      width: 240px;
      height: 500px;
      /*background: url(images/slidepic2.jpg);*/
      float: left;
    }
  </style>

jQuery實現

<script src = 'jquery-3.2.1.js'></script>
<script>
  $(function(){
    //1遍歷每一張li 獲取每個元素設置對應的圖片
    var lis = $('li');
    lis.each(function(index, element){
      //通過設置背景圖片名稱改變圖片的顯示
      var imgName = "images/slidepic" + (index + 2) +".jpg ";
      $(element).css('background', "url('"+ imgName +"')")
    });
    //2.展開狀態
    //鼠標滑入改變對應圖片寬度800 其他圖片(兄弟)改為100
    lis.mouseenter(function(){
      // console.log(this); 當前的li DOM元素
      //當前的圖片的寬度變為800
      $(this).stop().animate({width: 800});
      //其他圖片的寬度變為100
      $(this).siblings('li').stop().animate({width: 100});
    });
    //3鼠標滑出是全部顯示為收縮狀態
    lis.mouseout(function(){
      lis.stop().animate({width: 240});
    });
  })
</script>

jQuery精簡后代碼

//精簡代碼
$(function(){
  $('li').each(function(index, element){
    $(element).css('backgroud',"url('images/slidepic"+(index + 2)+.jpg')");
  }).mouseenter(function(){
    $(this).stop().animate({width: 800}).siblings().stop().aniamte(width: 100});
  }).mouseout(function(){
    $('li').stop().animate({width: 240});
  });
})

實現方法二：改變圖片的偏移值

html+css代碼

<body>
  <div class="picList">
    <ul>
      <li>![](images/slidepic8.jpg)</li>
      <li>![](images/slidepic3.jpg)</li>
      <li>![](images/slidepic4.jpg)</li>
      <li>![](images/slidepic5.jpg)</li>
      <li>![](images/slidepic7.jpg)</li>
    </ul>
  </div>
</body>
<style>
    *{
      background-color: #aaa;
      padding: 0;
      margin: 0;
    }
    ul{list-style: none;}
    .picList{
      width: 1000px;
      height: 400px;
      /*border:1px solid #eee;*/
      margin:100px auto;
      position: relative;
      overflow: hidden;
    }
    /*設置定位屬性 所有圖片覆蓋在起始位置*/
    .picList ul li{
      position: absolute;
      width: 1000px;
      height: 400px;
      top: 0;
    }
    img{
      width: 100%;
      height: 400px;
      cursor: pointer;
    }
</style>

jQuery實現

<script src = 'jquery-3.2.1.js'></script>
<script >
  $(function(){
    //1獲取所有的圖片 設置初始的收縮狀態left:i*200
    var lis = $('li');
    for(var i = 0; i < lis.length; i++){
      lis.eq(i).css({left:i*200 + 'px' });
    }
    //2.設置hover內置函數,實現鼠標滑入展開滑出收縮效果
    lis.hover(function(){
      var index = $(this).index(); //DOM對象轉換jQuery對象
      //2.1鼠標滑入后,當前圖片的前面圖片偏移位置減小到 j*100位置
      for(var j = 0; j <= index; j++){
        lis.eq(j).stop().animate({left: j*100 + 'px'},300);
      }
      //2.2鼠標滑入后,當前圖片的后面圖片偏移位置擴大到 500+j*100位置
      for(var j = index + 1; j < lis.length; j++){
        lis.eq(j).stop().animate({left: 500+j*100 + 'px'},300);
      }
    },function(){ //2.3鼠標滑出后,所有圖片恢復到原來的位置 i*200
      for(var i = 0; i < lis.length; i++){
        lis.eq(i).stop().animate({left: i*200 + 'px'},300);
      }
    });
  })
</script>

注意：方法一在實現的過程中，注意寬度和圖片命名的設置。

提示：這里使用的是jQuery代碼實現，javaScript代碼也是一樣的可以實現，只是修改下遍歷過程和內置函數方法，另外再重寫動畫函數。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery如何實現圖片推拉門動畫效果”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

文章標題：jQuery如何實現圖片推拉門動畫效果
網頁網址：http://vcdvsql.cn/article34/jhejse.html

成都網站建設公司_創新互聯，為您提供外貿網站建設、域名注冊、企業網站制作、商城網站、網站改版、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都定制網站建設