向上无缝滚动的图片效果_图片特效特效

织梦DedeCMS视频教程买空间租服务器选网硕互联！ 无忧站长工具,百度权重一键全查!

使一组图上无缝向上滚动的效果，用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 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订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些

收藏&分享