欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery動(dòng)畫效果實(shí)現(xiàn)圖片無縫連續(xù)滾動(dòng)

 更新時(shí)間：2021年06月09日 11:59:07   作者：秋恨雪  
這篇文章主要為大家介紹了jQuery動(dòng)畫效果實(shí)現(xiàn)圖片無縫連續(xù)滾動(dòng)，實(shí)現(xiàn)類似連續(xù)不間斷的滾動(dòng)廣告位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例介紹了jQuery動(dòng)畫效果實(shí)現(xiàn)圖片無縫連續(xù)滾動(dòng)的詳細(xì)代碼，分享給大家供大家參考，具體內(nèi)容如下

效果圖如下：

一、HTML代碼

<body> 
  <div id="container"> 
    <ul id="content"> 
      <li><a href="#"><img src="images/0.png"/></a></li> 
      <li><a href="#"><img src="images/1.png"/></a></li> 
      <li><a href="#"><img src="images/tewu.png"/></a></li> 
      <li><a href="#"><img src="images/2.png"/></a></li> 
      <li><a href="#"><img src="images/tewu.png"/></a></li> 
      <li><a href="#"><img src="images/3.png"/></a></li> 
      <li><a href="#"><img src="images/4.png"/></a></li> 
    </ul> 
  </div> 
</body>

1. id為container的div是最外層的包裝，用來控制滾動(dòng)區(qū)域顯示的具體位置。
2. id為content的ul用來包裝那些需要滾動(dòng)的圖片。

3. li元素就是用來包裝具體的圖片。

二、CSS代碼

*{margin: 0; padding: 0;} 
 
img{ 
  border:0; 
} 
 
#container{ 
  width:800px; 
  height: 130px; 
<span style="white-space:pre">  </span>margin:100px auto; 
  border:3px solid blue; 
  overflow: hidden; 
  position: relative; 
} 
 
#container ul{ 
  list-style: none; 
  width:10000px; 
  position: absolute; 
} 
 
#container ul li{ 
  float:left; 
  margin-right: 20px; 
}

這里說明一點(diǎn)，ul 的 width為什么設(shè)置為10000px。 因?yàn)闊o縫連續(xù)滾動(dòng)的實(shí)現(xiàn)原理，就是在現(xiàn)有顯示圖片的基礎(chǔ)上克隆一份，并且拼接在顯示圖片的后面，但由于顯示圖片的總寬度是未知的，所以為了安全性，最好將ul的width寬度設(shè)置比較大些。

三、無縫連續(xù)滾動(dòng)原理分析

四、JQuery實(shí)現(xiàn)代碼

<script type="text/javascript"> 
/* window.onload比 $(function(){}) 加載的更晚一些，這樣那些寬度的計(jì)算在Chrome中就可以準(zhǔn)確計(jì)算了*/  
  window.onload = function(){ 
 
    /*計(jì)算一個(gè)segment的寬度*/ 
 
    var segmentWidth = 0; 
    $("#container #content li").each(function(){ 
      segmentWidth+= $(this).outerWidth(true); 
    }); 
 
    $("#container #content li").clone().appendTo($("#container #content")); 
 
    run(6000); 
 
    function run(interval){ 
      $("#container #content").animate({"left":-segmentWidth}, interval,"linear",function(){ 
        $("#container #content").css("left",0); 
        run(6000); 
      }); 
    } 
 
    $("#container").mouseenter(function(){ 
      $("#container #content").stop(); 
    }).mouseleave(function(){ 
      var passedCourse = -parseInt($("#container #content").css("left")); 
      var time = 6000 * (1 - passedCourse/segmentWidth); 
      run(time); 
    }); 
  }; 
     
</script>

1. 先通過each遍歷所有的li元素，計(jì)算出它們寬度之和。
2. 拷貝一份圖片到現(xiàn)有圖片的后面，原理分析圖的"圖一"所示。

3. 設(shè)置6秒鐘滾動(dòng)完界面上面現(xiàn)有的圖片，滾動(dòng)完畢后，通過設(shè)置content的left值，將其整體拉回到初始狀態(tài)，原理分析圖的"圖二"所示。然后遞歸調(diào)用run方法，完成無限滾動(dòng)。

4. 當(dāng)鼠標(biāo)經(jīng)過滾動(dòng)區(qū)域的時(shí)候，動(dòng)畫立刻停止; 當(dāng)鼠標(biāo)離開的時(shí)候，動(dòng)畫繼續(xù)執(zhí)行。

關(guān)于動(dòng)畫繼續(xù)執(zhí)行的代碼，如下圖分析：

以上就是jQuery實(shí)現(xiàn)圖片無縫連續(xù)滾動(dòng)的代碼，希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評論