文字向上滚动:
<
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 >
图片向上滚动
图片乡下滚动
向左滚动,带控制条
< 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 >
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 >
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 >
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 >
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 >