向上無縫滾動的圖片效果_圖片特效特效

使一組圖上無縫向上滾動的效果，用CSS定義滾動區域的大小與圖片正好重疊，然后用JS定義每次滾動的距離也正好與圖片大小一樣，實現了這種美妙的圖片效果。如果要更改圖片的大小，記著要把CSS也一并修改哦！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>向上無縫滾動的圖片效果</title>
<meta http-equiv="mrc-type" mrc="text/html;charset=gb2312">
<style type="text/css">
#ad{
	position:absolute;
	width:120px;
	height:89px;
	border:1px solid #000;
	overflow:hidden;
}
#ad ul{
	position:absolute;
	list-style-type:none;
	margin:0;
	padding:0;
}
</style>
<script language="javascript">
var ad = {
	o:null,      // 存放滾動的UL
	cloneImg:null,  //克隆UL的第一個圖片
	adY:0, //滾動值
	distan:0, //每個圖片的高度
	init:function(obj){
		if(!obj.style.top){
		obj.style.top = '0px';
		}
		this.cloneImg = obj.firstChild.cloneNode(true); //克隆第一個節點
		if(this.cloneImg.nodeType == 3) this.cloneImg = obj.firstChild.nextSibling.cloneNode(true);	//除IE外第一個節點為文本節點，讓克隆節點還是指向第一個元素
		obj.appendChild(this.cloneImg); //讓克隆的節點放入最后
		this.adY = parseInt(obj.style.top);
		this.o = obj;
		this.distan = this.cloneImg.offsetHeight;
		this.moveCtrl();
	},
	moveCtrl:function(){
		if(Math.abs(this.adY) == this.o.offsetHeight - this.distan) this.adY = 0;//到達底部滾動跳回最上面
		if(Math.abs(this.adY)%this.distan==0){
			setTimeout('ad.moveCtrl()',2000);//圖片停留延遲
		} else {
			setTimeout('ad.moveCtrl()',10);//運動循環
		}
		--this.adY;
		ad.o.style.top = this.adY + 'px';
	}
}
window.onload = function(){
	var obj = document.getElementById('adul');
	ad.init(obj);	
}
</script>
</head>
<body>
<div   class="iwo2k00"   id="ad">
  <ul id="adul">
    <li><img src="http://p1.mb5u.com/texiao/1/20110225160445168.jpg"></li>
    <li><img src="http://p1.mb5u.com/texiao/1/20110225160445169.jpg"></li>
    <li><img src="http://p1.mb5u.com/texiao/1/20110225160445170.jpg"></li>
    <li><img src="http://p1.mb5u.com/texiao/1/20110225160445171.jpg"></li>
    <li><img src="http://p1.mb5u.com/texiao/1/20110225160445172.jpg"></li>
  </ul>
</div>
</body>
</html>

所屬頻道：圖片特效特效/更新時間：2012-12-06

[收藏][報錯][返回列表]

相關圖片特效特效：

向上無縫滾動的圖片效果_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些