源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 117|回复: 17

[JavaScript] javascript上下左右定时滚动插件

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2010-6-19 16:43:52 | 显示全部楼层 |阅读模式
在网上找到的,我认为最为方便的一段定时滚动代码,找了很多其他的总是有这样那样的问题,好不容易找到的,就分享一下。 核心代码:
复制代码 代码如下:
<script type="text/javascript">
function Marquee() {
this.ID = document.getElementById(arguments[0]);
this.Direction = arguments[1];
this.Step = arguments[2];
this.Width = arguments[3];
this.Height = arguments[4];
this.Timer = arguments[5];
this.WaitTime = arguments[6];
this.StopTime = arguments[7];
if (arguments[8]) { this.ScrollStep = arguments[8]; } else { this.ScrollStep = this.Direction > 1 ? this.Width : this.Height; }
this.CTL = this.StartID = this.Stop = this.MouseOver = 0;
this.ID.style.overflowX = this.ID.style.overflowY = "hidden";
this.ID.noWrap = true;
this.ID.style.width = this.Width;
this.ID.style.height = this.Height;
this.ClientScroll = this.Direction > 1 ? this.ID.scrollWidth : this.ID.scrollHeight;
this.ID.innerHTML += this.ID.innerHTML;
this.Start(this, this.Timer, this.WaitTime, this.StopTime);
}
Marquee.prototype.Start = function(msobj, timer, waittime, stoptime) {
msobj.StartID = function() { msobj.Scroll(); }
msobj.Continue = function() {
if (msobj.MouseOver == 1) { setTimeout(msobj.Continue, waittime); }
else { clearInterval(msobj.TimerID); msobj.CTL = msobj.Stop = 0; msobj.TimerID = setInterval(msobj.StartID, timer); }
}
msobj.Pause = function() { msobj.Stop = 1; clearInterval(msobj.TimerID); setTimeout(msobj.Continue, waittime); }
msobj.Begin = function() {
msobj.TimerID = setInterval(msobj.StartID, timer);
msobj.ID.onmouseover = function() { msobj.MouseOver = 1; clearInterval(msobj.TimerID); }
msobj.ID.onmouseout = function() { msobj.MouseOver = 0; if (msobj.Stop == 0) { clearInterval(msobj.TimerID); msobj.TimerID = setInterval(msobj.StartID, timer); } }
}
setTimeout(msobj.Begin, stoptime);
}
Marquee.prototype.Scroll = function() {
switch (this.Direction) {
case 0:
this.CTL += this.Step;
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL; this.Pause(); return; }
else { if (this.ID.scrollTop >= this.ClientScroll) this.ID.scrollTop -= this.ClientScroll; this.ID.scrollTop += this.Step; }
break;
case 1:
this.CTL += this.Step;
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL; this.Pause(); return; }
else { if (this.ID.scrollTop <= 0) this.ID.scrollTop += this.ClientScroll; this.ID.scrollTop -= this.Step; }
break;
case 2:
this.CTL += this.Step;
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL; this.Pause(); return; }
else { if (this.ID.scrollLeft >= this.ClientScroll) this.ID.scrollLeft -= this.ClientScroll; this.ID.scrollLeft += this.Step; }
break;
case 3:
this.CTL += this.Step;
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL; this.Pause(); return; }
else { if (this.ID.scrollLeft <= 0) this.ID.scrollLeft += this.ClientScroll; this.ID.scrollLeft -= this.Step; }
break;
}
}
</script>

控制使用代码:
复制代码 代码如下:
<script type="text/javascript">
<!--
window.onload = function() {
new Marquee(
"s1", //容器ID
0, //向上滚动(0向上 1向下 2向左 3向右)
2, //滚动的步长
251, //容器可视宽度
520, //容器可视高度
50, //定时器 数值越小,滚动的速度越快(1000=1秒,建议不小于20)
2000, //间歇停顿时间(0为不停顿,1000=1秒)
3000, //开始时的等待时间(0为不等待,1000=1秒)
75 //间歇滚动间距(可选),可理解为行高,我这里是3*25=75,就是每次滚动三行
);
};
-->
</script>

效果演示:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
回复

使用道具 举报

2

主题

2万

回帖

73

积分

注册会员

Rank: 2

积分
73
发表于 2022-8-22 04:40:25 | 显示全部楼层
看看看咋么
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

499

积分

中级会员

Rank: 3Rank: 3

积分
499
发表于 2023-7-4 04:06:50 | 显示全部楼层
sdsadsadsadf
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-21 21:50:18 | 显示全部楼层
啦啦啦啦啦啦啦啦!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-23 15:17:14 | 显示全部楼层
不错的源码论坛
回复 支持 反对

使用道具 举报

8

主题

2万

回帖

52

积分

注册会员

Rank: 2

积分
52
发表于 2024-4-8 07:06:18 | 显示全部楼层
2222222222222222
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2024-4-13 07:50:47 | 显示全部楼层
为全额万千瓦
回复 支持 反对

使用道具 举报

5

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2024-5-18 17:01:58 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

87

积分

注册会员

Rank: 2

积分
87
发表于 2024-5-18 20:17:23 | 显示全部楼层
哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

5

主题

2万

回帖

183

积分

注册会员

Rank: 2

积分
183
发表于 2024-6-17 09:38:20 | 显示全部楼层
抽根烟,下来看看再说
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-1-21 00:03 , Processed in 0.109601 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表