纯javascript实现广告的无缝滚动
给定一个大的div层(<div class="content" id="content">)，包围ul，超出div层 的部分隐藏。
设置ul标签的position:relative(实现滚动的必要条件)。
下面的例子是向下滚动，我们可以更新ul的top值来实现滚动效果。this.pause就是移动的距离。具体看代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>广告的无缝滚动</title>
<style>
*{margin:0;padding:0;font-family:微软雅黑;}
ul{list-style:none;}
.adMove{border:1px solid #FF0000;width:200px;height:30px;}
.adMove .content{width:200px;height:30px;border:0px solid #FF0000; overflow:hidden;}
.adMove ul{height:150px;width:200px;position:relative;}
.adMove ul li{height:30px;}
.adMove ul li span{line-height:30px;}
a{ text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
</style>
</head>
<script type="text/javascript">
function $(id)
{
if( arguments.length==1 && "string" == typeof id)
{
return document.getElementById(arguments[0]);
}
}
var Class=
{
create:function()
{
return function()
{
this.initialize.apply(this,arguments);
}
}
}
var Extend=function(desc,src)
{
for(var property in src)
{
desc[property]=src[property];
}
return desc;
}
Object.prototype.extend=function(obj)
{
return Extend.apply(this,[this,obj]);
}
//事件添加，考虑浏览器兼容
function bind(obj , eventName, eventFn)
{
if(obj.addEventListener)
{
obj.addEventListener(eventName,eventFn,false);
}
else if(obj.attachEvent)
{
obj.attachEvent("on"+eventName, eventFn);
}
else
{
obj["on"+eventName]=eventFn;
}
}
var Animate=Class.create();
Animate.prototype=
{
//相当于构造方法
initialize:function(content,ad,options)
{
onMove=this;
var content=$(content);
this.adUl=$(ad);
var adLi=this.adUl.getElementsByTagName("li"); //获取广告li标签
this.liHeight=adLi[0].offsetHeight; //获取每一个li标签的高度
this.liLen=adLi.length; //获取li标签的个数
this.currentLi=0; //当前li的位置
this.setOptions(options); //参数设置
this.pause=0;
bind(content, "mouseover", function() { onMove.stopMove(); });
bind(content, "mouseout", function() { onMove.start(); });
//开始滚动，但是让第一张也停留一段时间
this.firstMove=window.setInterval( function() { onMove.start(); }, this.options.pauseTime);
},
setOptions:function(options)
{
this.options=
{
step:-1, //每秒移动的像素值
speed:50, //移动的速度，每多少毫秒调用一次move，越大越慢
pauseTime:2000, //停留的时间
pauseDis:30 //每次移动pauseDis这个距离后停留pauseTime (ms)
};
Object.extend(this.options, options || {});
},
move:function()
{
onMove=this;
var moveStep=this.options.step; //每次移动的像素
var time=this.options.speed;
this.pause+=moveStep;
this.adUl.style.top=this.pause+"px";
if(this.currentLi==this.liLen-1) //到了最后一张，马上跳转到第一张，形成无缝滚动
{
this.adUl.style.top=0+"px";
this.pause=0;
this.currentLi=0;
}
else
{
if(Math.abs(this.pause) % this.options.pauseDis == 0) //表示是移动距离的倍数
{
time=this.options.pauseTime; //停留
this.currentLi++;
}
}
this.moveTime = window.setTimeout(function(){ onMove.move(); }, time);
},
start:function()
{
clearInterval(this.firstMove);
this.move();
},
stopMove:function()
{
clearTimeout(this.moveTime);
}
}
window.οnlοad=function()
{
new Animate("content","ad",{pauseDis:30});
}
</script>
<body>
<div class="adMove" id="adMove">
<div class="content" id="content">
<ul id="ad">
<li><a href="#"><span>开始滚动</span></a></li>
<li><a href="#"><span>滚动1</span></a></li>
<li><a href="#"><span>滚动2</span></a></li>
<li><a href="#"><span>滚动3</span></a></li>
<li><a href="#"><span>滚动4</span></a></li>
<li><a href="#"><span>开始滚动</span></a></li>
</ul>
</div>
</div>
</body>
</html>
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
