PHP:pg_untrace()的用法_PostgreSQL函數
683
2023-12-12
本文實例介紹了jQuery動畫效果實現圖片無縫連續滾動的詳細代碼，分享給大家供大家參考，具體內容如下
效果圖如下：
一、HTML代碼
<body>
<div id="container">
<ul id="content">
<li><a ><img src="http://www.gimoo.net/t/1904/images/0.png"/></a></li>
<li><a ><img src="http://www.gimoo.net/t/1904/images/1.png"/></a></li>
<li><a ><img src="http://www.gimoo.net/t/1904/images/tewu.png"/></a></li>
<li><a ><img src="http://www.gimoo.net/t/1904/images/2.png"/></a></li>
<li><a ><img src="http://www.gimoo.net/t/1904/images/tewu.png"/></a></li>
<li><a ><img src="http://www.gimoo.net/t/1904/images/3.png"/></a></li>
<li><a ><img src="http://www.gimoo.net/t/1904/images/4.png"/></a></li>
</ul>
</div>
</body>
1. id為container的div是最外層的包裝，用來控制滾動區域顯示的具體位置。
2. id為content的ul用來包裝那些需要滾動的圖片。
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;
}
這里說明一點，ul 的 width為什么設置為10000px。 因為無縫連續滾動的實現原理，就是在現有顯示圖片的基礎上克隆一份，并且拼接在顯示圖片的后面，但由于顯示圖片的總寬度是未知的，所以為了安全性，最好將ul的width寬度設置比較大些。
三、無縫連續滾動原理分析
四、JQuery實現代碼
<script type="text/javascript">
/* window.onload比 $(function(){}) 加載的更晚一些，這樣那些寬度的計算在Chrome中就可以準確計算了*/
window.onload = function(){
/*計算一個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元素，計算出它們寬度之和。
2. 拷貝一份圖片到現有圖片的后面，原理分析圖的"圖一"所示。
3. 設置6秒鐘滾動完界面上面現有的圖片，滾動完畢后，通過設置content的left值，將其整體拉回到初始狀態，原理分析圖的"圖二"所示。然后遞歸調用run方法，完成無限滾動。
4. 當鼠標經過滾動區域的時候，動畫立刻停止; 當鼠標離開的時候，動畫繼續執行。
關于動畫繼續執行的代碼，如下圖分析：
以上就是jQuery實現圖片無縫連續滾動的代碼，希望對大家的學習有所幫助。
