js模拟marquee效果收集
2007-12-10 15:27
344 查看
文字向上滚动:
<head>
<title>效果演示</title>
</head>
<body>
<h3>建立图层</h3>
<div id="sampleDiv" style="font-size: 12px; line-height: 20px;">
当然你不需要像上面这样全部写出来,你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域,但是又在后面用这种方式修改过了,则以后面的为准。
</div>
<h3>然后调用脚本文件</h3>
<script type="text/javascript">
function scrollingAD(_id, _width, _height, _bgColor, _direction, _delay, _pauseTime, _size, _isHover) ...{
this.id = _id;
this.width = _width;
this.height = _height;
this.bgColor = _bgColor;
this.direction = _direction;
this.delay = _delay;
this.pauseTime = _pauseTime;
this.size = _size;
this.object = null;
this.isMove = true;
if((this.id == "") || (this.id == null)) ...{
alert("必须输入对象的 ID 才能创建滚动区域!");
this.isMove = false;
return false;
}
if(document.getElementById(this.id)) ...{
this.object = document.getElementById(this.id);
} else ...{
window.alert("滚动区域创建失败! 请确认 " + this.id + " 是否拼写错误。");
this.isMove = false;
return false;
}
}
scrollingAD.prototype.checkNumber = function(_attribute, defaultValue) ...{
if(isNaN(_attribute)) ...{
return defaultValue;
} else ...{
return ((typeof(parseInt(_attribute)) == "number") ? parseInt(_attribute) : defaultValue);
}
}
scrollingAD.prototype.move = function() ...{
if(this.isMove == false) return false;
var defaultWidth = 200;
var defaultHeight = 50;
var defaultDelay = 20;
var defaultPauseTime = 2000;
var defaultIsHover = true;
var defaultBgColor = "transparent";
var defaultDirection = "up";
this.width = this.checkNumber(this.width, defaultWidth);
this.height = this.checkNumber(this.height, defaultHeight);
this.delay = this.checkNumber(this.delay, defaultDelay);
this.pauseTime = this.checkNumber(this.pauseTime, defaultPauseTime);
this.isHover = (typeof(this.isHover) == "boolean") ? this.isHover : defaultIsHover;
if(this.direction == "left") ...{
this.size = this.checkNumber(this.size, this.width);
} else ...{
this.size = this.checkNumber(this.size, this.height);
}
if((this.bgColor == null) || (typeof(this.bgColor) == undefined)) ...{
this.bgColor = defaultBgColor;
} else ...{
this.bgColor = this.bgColor;
}
if((this.direction == null) || (typeof(this.direction) == undefined)) ...{
this.direction = defaultDirection;
} else ...{
this.direction = (this.direction.search(/(^up$)|(^left$)/gi) != -1) ? this.direction.toLowerCase() : defaultDirection;
}
// 创建滚动区域;
with(this.object) ...{
style.display = "block";
style.width = this.width + "px";
style.height = this.height + "px";
style.overflow = "hidden";
style.backgroundColor = this.bgColor;
}
if(this.direction == "up") ...{
this.object.innerHTML = "<div id="" + this.id + "_mirror">" + this.object.innerHTML + "</div>" + "<div>" + this.object.innerHTML + "</div><input type="hidden" value="1" id="" + this.id + "_isHover" />";
} else ...{
this.object.innerHTML = "<span id="" + this.id + "_mirror">" + this.object.innerHTML + "</span>" + "<span>" + this.object.innerHTML + "</span><input type="hidden" value="1" id="" + this.id + "_isHover" />";
}
if(document.getElementById(this.id)) ...{
var evalString;
if(this.direction == "up") ...{
evalString = "scrollToUp("" + this.id + "", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) ";
} else ...{
evalString = "scrollToLeft("" + this.id + "", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) ";
}
eval(evalString);
} else ...{
return false;
}
function pixelToNum(_string) ...{
//该函数用于去掉数值后面的px,并将之转化为数字。
if(_string.slice(_string.length - 2) == "px") ...{
return parseInt(_string.slice(0, (_string.length - 2)));
} else ...{
return _string;
}
}
function scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s) ...{
var obj = document.getElementById(_id);
var mirror = document.getElementById(_id + "_mirror");
if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginLeft) >= 0) ...{
var evalString =_id + "_timer = window.setTimeout(function() {scrollToLeft("" + _id + "", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")";
if(_isHover) ...{
mirror.onmouseover = function() ...{document.getElementById(_id + "_isHover").value = 0;}
mirror.onmouseout = function() ...{document.getElementById(_id + "_isHover").value = 1;}
var step = parseInt(document.getElementById(_id + "_isHover").value);
mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - step) + "px";
eval("var " + evalString);
} else ...{
mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - 1) + "px";
eval("var " + evalString);
}
} else ...{
if(mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) >= 0) ...{
_s += 1;
window.setTimeout(function() ...{scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime);
} else ...{
mirror.style.marginLeft = mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) + "px";;
window.setTimeout(function() ...{scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime);
}
}
}
function scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s) ...{
var obj = document.getElementById(_id);
var mirror = document.getElementById(_id + "_mirror");
if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginTop) >= 0) ...{
var evalString =_id + "_timer = window.setTimeout(function() {scrollToUp("" + _id + "", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")";
if(_isHover) ...{
mirror.onmouseover = function() ...{document.getElementById(_id + "_isHover").value = 0;}
mirror.onmouseout = function() ...{document.getElementById(_id + "_isHover").value = 1;}
var step = parseInt(document.getElementById(_id + "_isHover").value);
mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - step) + "px";
eval("var " + evalString);
} else ...{
mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - 1) + "px";
eval("var " + evalString);
}
} else ...{
if(mirror.offsetHeight + pixelToNum(mirror.style.marginTop) >= 0) ...{
_s += 1;
window.setTimeout(function() ...{scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime);
} else ...{
mirror.style.marginTop = mirror.offsetHeight + pixelToNum(mirror.style.marginTop) + "px";;
window.setTimeout(function() ...{scrollToUp(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime);
}
}
}
}
</script>
<h3>最后建立滚动区域</h3>
<script type="text/javascript">
// <![CDATA[
var sampleDiv = new scrollingAD("sampleDiv");
sampleDiv.width = 200;
sampleDiv.height = 20;
sampleDiv.pauseTime = 0;
sampleDiv.direction = "right";
sampleDiv.bgColor = "yellow";
sampleDiv.move();
// ]]>
</script>
<p>如果脚本报错,可能是因为我的网站速度连接太慢的原因,只要刷新一下页面就行了。</p>
</body>
</html>
图片向上滚动
<div id=demo style=overflow:hidden;height:150;width:150;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
function Marquee(){
//当滚动至demo1与demo2交界时
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseover=function() {clearInterval(MyMar)}
//鼠标移开时重设定时器
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
图片乡下滚动
<div id=demo style=overflow:hidden;height:150;width:150;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
<div id=demo style=overflow:hidden;height:150;width:150;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向左滚动,带控制条
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
下面是解释:
offsetWidth是指物体可见宽度
scrollLeft是指滚动滑块在滚动条上的位置
<!--对于此例,网页中一般会有三个容器,此处为demo,demo1和demo2;其中demo1和demo2均在demo中
demo的overflow属性一般为hidden,我在这里用auto是为了方便你查看scrollLeft的状态,
另外为方便你理解scrollLeft和offsetWidth,我还在后面加了一个viewstatus函数,鼠标经过容器时会看到相关参数值
//-->
<div id=demo style="width:200;overflow:auto">
<table><tr>
<td id=demo1>
<img src='a.gif' width=100><img src='b.gif' width=100></td>
<td id=demo2></td>
</tr></table>
</div>
<script>
var speed=30 //定义速度,实指下面滚动函数的执行间隔,值越小滚动越快
demo2.innerHTML=demo1.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //开始定义滚动函数
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
else{
demo.scrollLeft++ //否则,滑动块向右滚动(图片向左滚)
}
}//滚动函数定义完
var MyMar=setInterval(Marquee,speed) //设置定时器,使滚动函数每30毫秒运行一次
demo.onmouseover=function() {clearInterval(MyMar);viewstatus();}//鼠标经过时,清除定时器,停止执行滚动函数,弹出信息;
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}// 鼠标离开后,继续滚动
function viewstatus(){//这是我加的函数,很简单,不注释了
mess="demo.scrollLeft:"+demo.scrollLeft+" demo1.offsetWidth:"+demo1.offsetWidth
+" demo2.offsetWidth:"+demo2.offsetWidth;
alert(mess);
}
</script>
<head>
<title>效果演示</title>
</head>
<body>
<h3>建立图层</h3>
<div id="sampleDiv" style="font-size: 12px; line-height: 20px;">
当然你不需要像上面这样全部写出来,你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域,但是又在后面用这种方式修改过了,则以后面的为准。
</div>
<h3>然后调用脚本文件</h3>
<script type="text/javascript">
function scrollingAD(_id, _width, _height, _bgColor, _direction, _delay, _pauseTime, _size, _isHover) ...{
this.id = _id;
this.width = _width;
this.height = _height;
this.bgColor = _bgColor;
this.direction = _direction;
this.delay = _delay;
this.pauseTime = _pauseTime;
this.size = _size;
this.object = null;
this.isMove = true;
if((this.id == "") || (this.id == null)) ...{
alert("必须输入对象的 ID 才能创建滚动区域!");
this.isMove = false;
return false;
}
if(document.getElementById(this.id)) ...{
this.object = document.getElementById(this.id);
} else ...{
window.alert("滚动区域创建失败! 请确认 " + this.id + " 是否拼写错误。");
this.isMove = false;
return false;
}
}
scrollingAD.prototype.checkNumber = function(_attribute, defaultValue) ...{
if(isNaN(_attribute)) ...{
return defaultValue;
} else ...{
return ((typeof(parseInt(_attribute)) == "number") ? parseInt(_attribute) : defaultValue);
}
}
scrollingAD.prototype.move = function() ...{
if(this.isMove == false) return false;
var defaultWidth = 200;
var defaultHeight = 50;
var defaultDelay = 20;
var defaultPauseTime = 2000;
var defaultIsHover = true;
var defaultBgColor = "transparent";
var defaultDirection = "up";
this.width = this.checkNumber(this.width, defaultWidth);
this.height = this.checkNumber(this.height, defaultHeight);
this.delay = this.checkNumber(this.delay, defaultDelay);
this.pauseTime = this.checkNumber(this.pauseTime, defaultPauseTime);
this.isHover = (typeof(this.isHover) == "boolean") ? this.isHover : defaultIsHover;
if(this.direction == "left") ...{
this.size = this.checkNumber(this.size, this.width);
} else ...{
this.size = this.checkNumber(this.size, this.height);
}
if((this.bgColor == null) || (typeof(this.bgColor) == undefined)) ...{
this.bgColor = defaultBgColor;
} else ...{
this.bgColor = this.bgColor;
}
if((this.direction == null) || (typeof(this.direction) == undefined)) ...{
this.direction = defaultDirection;
} else ...{
this.direction = (this.direction.search(/(^up$)|(^left$)/gi) != -1) ? this.direction.toLowerCase() : defaultDirection;
}
// 创建滚动区域;
with(this.object) ...{
style.display = "block";
style.width = this.width + "px";
style.height = this.height + "px";
style.overflow = "hidden";
style.backgroundColor = this.bgColor;
}
if(this.direction == "up") ...{
this.object.innerHTML = "<div id="" + this.id + "_mirror">" + this.object.innerHTML + "</div>" + "<div>" + this.object.innerHTML + "</div><input type="hidden" value="1" id="" + this.id + "_isHover" />";
} else ...{
this.object.innerHTML = "<span id="" + this.id + "_mirror">" + this.object.innerHTML + "</span>" + "<span>" + this.object.innerHTML + "</span><input type="hidden" value="1" id="" + this.id + "_isHover" />";
}
if(document.getElementById(this.id)) ...{
var evalString;
if(this.direction == "up") ...{
evalString = "scrollToUp("" + this.id + "", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) ";
} else ...{
evalString = "scrollToLeft("" + this.id + "", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) ";
}
eval(evalString);
} else ...{
return false;
}
function pixelToNum(_string) ...{
//该函数用于去掉数值后面的px,并将之转化为数字。
if(_string.slice(_string.length - 2) == "px") ...{
return parseInt(_string.slice(0, (_string.length - 2)));
} else ...{
return _string;
}
}
function scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s) ...{
var obj = document.getElementById(_id);
var mirror = document.getElementById(_id + "_mirror");
if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginLeft) >= 0) ...{
var evalString =_id + "_timer = window.setTimeout(function() {scrollToLeft("" + _id + "", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")";
if(_isHover) ...{
mirror.onmouseover = function() ...{document.getElementById(_id + "_isHover").value = 0;}
mirror.onmouseout = function() ...{document.getElementById(_id + "_isHover").value = 1;}
var step = parseInt(document.getElementById(_id + "_isHover").value);
mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - step) + "px";
eval("var " + evalString);
} else ...{
mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - 1) + "px";
eval("var " + evalString);
}
} else ...{
if(mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) >= 0) ...{
_s += 1;
window.setTimeout(function() ...{scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime);
} else ...{
mirror.style.marginLeft = mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) + "px";;
window.setTimeout(function() ...{scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime);
}
}
}
function scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s) ...{
var obj = document.getElementById(_id);
var mirror = document.getElementById(_id + "_mirror");
if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginTop) >= 0) ...{
var evalString =_id + "_timer = window.setTimeout(function() {scrollToUp("" + _id + "", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")";
if(_isHover) ...{
mirror.onmouseover = function() ...{document.getElementById(_id + "_isHover").value = 0;}
mirror.onmouseout = function() ...{document.getElementById(_id + "_isHover").value = 1;}
var step = parseInt(document.getElementById(_id + "_isHover").value);
mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - step) + "px";
eval("var " + evalString);
} else ...{
mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - 1) + "px";
eval("var " + evalString);
}
} else ...{
if(mirror.offsetHeight + pixelToNum(mirror.style.marginTop) >= 0) ...{
_s += 1;
window.setTimeout(function() ...{scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime);
} else ...{
mirror.style.marginTop = mirror.offsetHeight + pixelToNum(mirror.style.marginTop) + "px";;
window.setTimeout(function() ...{scrollToUp(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime);
}
}
}
}
</script>
<h3>最后建立滚动区域</h3>
<script type="text/javascript">
// <![CDATA[
var sampleDiv = new scrollingAD("sampleDiv");
sampleDiv.width = 200;
sampleDiv.height = 20;
sampleDiv.pauseTime = 0;
sampleDiv.direction = "right";
sampleDiv.bgColor = "yellow";
sampleDiv.move();
// ]]>
</script>
<p>如果脚本报错,可能是因为我的网站速度连接太慢的原因,只要刷新一下页面就行了。</p>
</body>
</html>
图片向上滚动
<div id=demo style=overflow:hidden;height:150;width:150;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
function Marquee(){
//当滚动至demo1与demo2交界时
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseover=function() {clearInterval(MyMar)}
//鼠标移开时重设定时器
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
图片乡下滚动
<div id=demo style=overflow:hidden;height:150;width:150;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
<div id=demo style=overflow:hidden;height:150;width:150;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
<img src="attachments/month_0707/220077293150.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向左滚动,带控制条
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
下面是解释:
offsetWidth是指物体可见宽度
scrollLeft是指滚动滑块在滚动条上的位置
<!--对于此例,网页中一般会有三个容器,此处为demo,demo1和demo2;其中demo1和demo2均在demo中
demo的overflow属性一般为hidden,我在这里用auto是为了方便你查看scrollLeft的状态,
另外为方便你理解scrollLeft和offsetWidth,我还在后面加了一个viewstatus函数,鼠标经过容器时会看到相关参数值
//-->
<div id=demo style="width:200;overflow:auto">
<table><tr>
<td id=demo1>
<img src='a.gif' width=100><img src='b.gif' width=100></td>
<td id=demo2></td>
</tr></table>
</div>
<script>
var speed=30 //定义速度,实指下面滚动函数的执行间隔,值越小滚动越快
demo2.innerHTML=demo1.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //开始定义滚动函数
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
else{
demo.scrollLeft++ //否则,滑动块向右滚动(图片向左滚)
}
}//滚动函数定义完
var MyMar=setInterval(Marquee,speed) //设置定时器,使滚动函数每30毫秒运行一次
demo.onmouseover=function() {clearInterval(MyMar);viewstatus();}//鼠标经过时,清除定时器,停止执行滚动函数,弹出信息;
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}// 鼠标离开后,继续滚动
function viewstatus(){//这是我加的函数,很简单,不注释了
mess="demo.scrollLeft:"+demo.scrollLeft+" demo1.offsetWidth:"+demo1.offsetWidth
+" demo2.offsetWidth:"+demo2.offsetWidth;
alert(mess);
}
</script>
相关文章推荐
- JS模拟的腾讯微博app撕纸效果的实例代码
- 用JS模拟向左移动的侧移式灯箱效果
- JS模拟简易滚动条效果代码(附demo源码)
- js 模拟QQ聊天窗口图片播放效果(带滚轮缩放)
- marquee+js实现某个区域的“无缝滚动效果”
- JS窗口最大化(模拟最大化和点击最大化按钮效果)
- js模拟真实翻页的照片展示效果,超酷~
- JS实现模拟新浪微博大厅和腾讯微博首页微博消息滚动效果
- JS实现marquee滚动效果
- JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
- 记一次 JS 模拟 CSS active 效果的过程
- js模拟滤镜的图片渐显效果
- typer.js,可能是最小但功能也不多的模拟打字效果插件
- js模拟弹出效果代码修正版
- [原创]CLR GC垃圾收集过程模拟(用C#来显示垃圾收集过程的视觉效果)
- [转]网上收集到几个JS遮罩层效果
- JS多个矩形块选择效果代码(模拟CS结构)
- js 模拟气泡屏保效果代码
- js+CSS实现模拟华丽的select控件下拉菜单效果
- js 模拟qq对话框的拖动效果