<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function(){
var m = new XX.Fx.Marquee(document.getElementById('textdiv'), {direction:'top', speed:20, step:1});
m.start();
};
</script>
<script>
window.XX = window.XX || {};
XX.Fx = XX.Fx || {};
/*
走马灯构造函数；
参数elem:要进行包装的dom元素，即包装后，其内部元素会实现走马灯效果
opts:JSON格式的数据，可传入的参数包括:
{
speed //滚动速度，以毫秒为单位，默认为1000
step //滚动像素， 默认为5
direction //滚动方向，包括'left', 'right', 'top', 'bottom'，默认'left'
}
*/
XX.Fx.Marquee = function(elem, opts){
opts = opts || {};
this.el = elem;
this.speed = opts.speed || 1000;
this.step = opts.step || 5;
var dir = this.direction = opts.direction || 'left';
if( dir !== 'left' && dir !== 'right' && dir !== 'top' && dir !== 'bottom') {
throw new Error('Constructor "XX.Fx.Marquee": direction of options must be "left","right","top","bottom"');
}
elem.style.overflow = 'hidden';
elem.style.whiteSpace = 'nowrap';
if(dir === 'right' || dir === 'bottom'){
this.step = - this.step ;
}
this.Offset = (dir === 'left' || dir === 'right') ? 'scrollLeft' : 'scrollTop';
this.size = parseInt((dir === 'left' || dir === 'right') ? elem.scrollWidth : elem.scrollHeight);
};XX.Fx.Marquee.prototype.start = function(){
if(this.timer){
clearTimeout(this.timer);
}
this.el.innerHTML += this.el.innerHTML;
var that = this, speed = this.speed, step = this.step, offset = this.Offset, el = this.el, size = this.size, move = null;
switch (this.direction){
case 'right':
case 'bottom':
move = function(){
if(el[offset] > 0){
el[offset] += step;
setTimeout(move, speed)
} else{
el[offset] = that.size;
setTimeout(move, speed)
}
};
break;
default:
move = function(){
if(el[offset] < size){
el[offset] += step;
setTimeout(move, speed)
} else{
el[offset] = 0;
setTimeout(move, speed)
}
};
} this.timer = setTimeout(move, speed);
};XX.Fx.Marquee.prototype.stop = function(){
clearTimeout(this.timer);
};
</script>
</head><body>
<hr color="#ff0000" />
<div id="textdiv" style="border:1 solid #c0c0c0;text-align:left;width:650px;height:100px" onmousemove="">
<h2>--------------------走马灯演示测试--------------------------</h2><br />
文字滚动测试1<br />
文字滚动测试2<br />
文字滚动测试3<br />
<br />
制作者：Exodia<br />
联系方式:QQ39942816<br />
<a href="http://blog.csdn.net/dxx1988">BLOG地址</a>
</div>
</body>
</html>
<div id="colee1">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
<li>999</li>
</ul>
</div>
<div id="colee2"></div>
</div>
<script type="text/javascript">
var speed = 30;
var colee2 = document.getElementById("colee2");
var colee1 = document.getElementById("colee1");
var colee = document.getElementById("colee");
colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
function Marquee1() {
//当滚动至colee1与colee2交界时
if (colee2.offsetTop - colee.scrollTop <= 0) {
colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
} else {
colee.scrollTop++;
}
}
var MyMar1 = setInterval(Marquee1, speed); //设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover = function() {
clearInterval(MyMar1);
}
//鼠标移开时重设定时器
colee.onmouseout = function() {
MyMar1 = setInterval(Marquee1, speed);
}
</script>
this.timer值不是当前settimeout的值，所以不可能停止。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function(){
var m = new XX.Fx.Marquee(document.getElementById('demo'), {direction:'top', speed:80, step:1});
m.start();
myStop = function(){
m.stop();
}; myStart = function(){
m.start();
}
};
window.XX = window.XX || {};
XX.Fx = XX.Fx || {};
/*
走马灯构造函数；
参数elem:要进行包装的dom元素，即包装后，其内部元素会实现走马灯效果
opts:JSON格式的数据，可传入的参数包括:
{
speed //滚动速度，以毫秒为单位，默认为1000
step //滚动像素， 默认为5
direction //滚动方向，包括'left', 'right', 'top', 'bottom'，默认'left'
}
*//* XX.Fx.Marquee实现动画的函数 */
XX.Fx.Marquee = function(elem, opts){
opts = opts || {}; //为设定滚动的方向变量
this.el = elem;
this.speed = opts.speed || 1000; //滚动的速度为1秒滚动一次
this.step = opts.step || 5; //滚动像素设置为5
var dir = this.direction = opts.direction || 'left'; //滚动的方向设置
if( dir !== 'left' && dir !== 'right' && dir !== 'top' && dir !== 'bottom') {
throw new Error('Constructor "XX.Fx.Marquee": direction of options must be "left","right","top","bottom"');
} /*elem表示封装的滚定元素*/
elem.style.overflow = 'hidden';
elem.style.whiteSpace = 'nowrap';
if(dir === 'right' || dir === 'bottom'){
this.step = - this.step ;
}
this.Offset = (dir === 'left' || dir === 'right') ? 'scrollLeft' : 'scrollTop';
this.size = parseInt((dir === 'left' || dir === 'right') ? elem.scrollWidth : elem.scrollHeight);
this.el.innerHTML += this.el.innerHTML;
};
XX.Fx.Marquee.prototype.start = function(){ if(this.timer) {
clearTimeout(this.timer);
} var that = this, speed = this.speed, step = this.step, offset = this.Offset, el = this.el, size = this.size, move = null;
switch (this.direction){
case 'right':
case 'bottom':
move = function(){
if(el[offset] > 0){
el[offset] += step;
} else{
el[offset] = that.size;
}
};
break;
default:
move = function(){
if(el[offset] < size){
el[offset] += step;
} else{
el[offset] = 0;
}
};
}
this.timer = setInterval(move, speed);
};
XX.Fx.Marquee.prototype.stop = function(){
clearInterval(this.timer);
};</script>
</head><body>
<hr color="#ff0000" />
<div id="demo" style="border:1 solid #c0c0c0;text-align:left;width:954px;height:200px" onmouseover="myStop();" onmouseout="myStart();">
<h2>--------------------走马灯演示测试--------------------------</h2><br />
文字滚动测试1<br />
文字滚动测试2<br />
文字滚动测试3<br />
<br />
制作者：Exodia<br />
联系方式:QQ39942816<br />
<a href="http://blog.csdn.net/dxx1988">BLOG地址</a>
</div>
</body>
</html>
window.XX = window.XX || {};
XX.Fx = XX.Fx || {};楼主，问下，为啥要这么弄呢，我一直不明白