js模拟marquee效果收集

来源：互联网发布：Ext js proxy api 编辑：程序博客网时间：2024/04/27 15:53

文字向上滚动:

<head>

</head>

<body>

当然你不需要像上面这样全部写出来，你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域，但是又在后面用这种方式修改过了，则以后面的为准。

</div>

<h3>然后调用脚本文件</h3>

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>

// <![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>

</div>

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>

</div>

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>

</div>

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>

向左滚动，带控制条

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函数,鼠标经过容器时会看到相关参数值

//-->

</tr></table>

</div>

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>