主站
经典论坛
作品集
Think.Pages
博客
维基
桌面
聚合
注册
登录
专长会员
帮助
客服QQ:6650171
经典论坛
»
前台制作与脚本专栏
» 图片滚动实例
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
图片滚动实例
jiangxin85
[楼主]
燃烧的海平面
高级会员
帖子
562
体力
576
威望
0
当前
北京 海淀区
发短消息
加为好友
专长
前端制作
1
#
大
中
小
发表于 2008-5-30 18:11
我这有一个例子,是图片滚动的
我想改为文字滚动的,可是一开始我不想他滚动,只有鼠标放上去后才开始滚动
希望有高手指点一下,谢谢了
<!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=gb2312" /> <title>无标题文档</title> <script type="text/javascript"> function Marquee() { this.ID = document.getElementById(arguments[0]); if(!this.ID) { alert("您要设置的\"" + arguments[0] + "\"初始化错误\r\n请检查标签ID设置是否正确!"); this.ID = -1; return; } this.Direction = this.Width = this.Height = this.DelayTime = this.WaitTime = this.CTL = this.StartID = this.Stop = this.MouseOver = 0; this.Step = 1; this.Timer = 30; this.DirectionArray = {"top":0 , "up":0 , "bottom":1 , "down":1 , "left":2 , "right":3}; if(typeof arguments[1] == "number" || typeof arguments[1] == "string")this.Direction = arguments[1]; if(typeof arguments[2] == "number")this.Step = arguments[2]; if(typeof arguments[3] == "number")this.Width = arguments[3]; if(typeof arguments[4] == "number")this.Height = arguments[4]; if(typeof arguments[5] == "number")this.Timer = arguments[5]; if(typeof arguments[6] == "number")this.DelayTime = arguments[6]; if(typeof arguments[7] == "number")this.WaitTime = arguments[7]; if(typeof arguments[8] == "number")this.ScrollStep = arguments[8]; this.ID.style.overflow = this.ID.style.overflowX = this.ID.style.overflowY = "hidden"; this.ID.noWrap = true; this.IsNotOpera = (navigator.userAgent.toLowerCase().indexOf("opera") == -1); if(arguments.length >= 7)this.Start(); } Marquee.prototype.Start = function() { if(this.ID == -1)return; if(this.WaitTime < 800)this.WaitTime = 800; if(this.Timer < 20)this.Timer = 20; if(this.Width == 0)this.Width = parseInt(this.ID.style.width); if(this.Height == 0)this.Height = parseInt(this.ID.style.height); if(typeof this.Direction == "string")this.Direction = this.DirectionArray[this.Direction.toString().toLowerCase()]; this.HalfWidth = Math.round(this.Width / 2); this.HalfHeight = Math.round(this.Height / 2); this.BakStep = this.Step; this.ID.style.width = this.Width + "px"; this.ID.style.height = this.Height + "px"; if(typeof this.ScrollStep != "number")this.ScrollStep = this.Direction > 1 ? this.Width : this.Height; var templateTop = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;display:inline;'><tr><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td></tr></table>"; var templateTop = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;'><tr><td>MSCLASS_TEMP_HTML</td></tr><tr><td>MSCLASS_TEMP_HTML</td></tr></table>"; var msobj = this; msobj.tempHTML = msobj.ID.innerHTML; if(msobj.Direction <= 1) { msobj.ID.innerHTML = templateTop.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML); } else { if(msobj.ScrollStep == 0 && msobj.DelayTime == 0) { msobj.ID.innerHTML += msobj.ID.innerHTML; } else { msobj.ID.innerHTML = templateLeft.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML); } } var timer = this.Timer; var delaytime = this.DelayTime; var waittime = this.WaitTime; msobj.StartID = function(){msobj.Scroll()} msobj.Continue = function() { if(msobj.MouseOver == 1) { setTimeout(msobj.Continue,delaytime); } 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,delaytime); } msobj.Begin = function() { msobj.ClientScroll = msobj.Direction > 1 ? msobj.ID.scrollWidth / 2 : msobj.ID.scrollHeight / 2; if((msobj.Direction <= 1 && msobj.ClientScroll <= msobj.Height + msobj.Step) || (msobj.Direction > 1 && msobj.ClientScroll <= msobj.Width + msobj.Step)) { msobj.ID.innerHTML = msobj.tempHTML; delete(msobj.tempHTML); return; } delete(msobj.tempHTML); msobj.TimerID = setInterval(msobj.StartID,timer); if(msobj.ScrollStep < 0)return; msobj.ID.onmousemove = function(event) { if(msobj.ScrollStep == 0 && msobj.Direction > 1) { var event = event || window.event; if(window.event) { if(msobj.IsNotOpera) { msobj.EventTop = event.srcElement.id == msobj.ID.id ? event.offsetY - msobj.ID.scrollTop : event.srcElement.offsetTop - msobj.ID.scrollTop + event.offsetY; } else { msobj.ScrollStep = null; return; } } else { msobj.EventTop = event.layerY - msobj.ID.scrollTop; } msobj.Direction = msobj.EventTop > msobj.HalfHeight ? 3 : 2; msobj.AbsCenter = Math.abs(msobj.HalfHeight - msobj.EventTop); msobj.Step = Math.round(msobj.AbsCenter * (msobj.BakStep*2) / msobj.HalfHeight); } } msobj.ID.onmouseover = function() { if(msobj.ScrollStep == 0)return; msobj.MouseOver = 1; clearInterval(msobj.TimerID); } msobj.ID.onmouseout = function() { if(msobj.ScrollStep == 0) { if(msobj.Step == 0)msobj.Step = 1; return; } msobj.MouseOver = 0; if(msobj.Stop == 0) { clearInterval(msobj.TimerID); msobj.TimerID = setInterval(msobj.StartID,timer); } } } setTimeout(msobj.Begin,waittime); } Marquee.prototype.Scroll = function() { switch(this.Direction) { case 0: this.CTL += this.Step; if(this.CTL >= this.ScrollStep && this.DelayTime > 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.DelayTime > 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.DelayTime > 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 3: this.CTL += this.Step; if(this.CTL >= this.ScrollStep && this.DelayTime > 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; } } //--> </script> </head> <body> <div id="marqueediv1" style="width:632px;height:52px;overflow:hidden; border:1px solid #666;"> <img src="http://www.baidu.com/img/logobk.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.google.cn/intl/zh-CN_cn/images/google_bk.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.baidu.com/img/logobk.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.google.cn/intl/zh-CN_cn/images/google_bk.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.baidu.com/img/logobk.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.google.cn/intl/zh-CN_cn/images/google_bk.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.baidu.com/img/logobk.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.google.cn/intl/zh-CN_cn/images/google_bk.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.baidu.com/img/logobk.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.google.cn/intl/zh-CN_cn/images/google_bk.gif" width="150" height="50" border="0" hspace="1"> </div> <input type="button" value="向上" id="top0"> <input type="button" value="向下" id="bottom1"> <script type="text/javascript"> var marquee3=new Marquee("marqueediv1"); marquee3.Direction="top"; marquee3.Step=1; marquee3.Width=632; marquee3.Height=52; marquee3.Timer=5; marquee3.ScrollStep=1;//此句禁止鼠标控制 marquee3.Start(); var top0 = document.getElementById("top0");//此句控制兼容FF var bottom1 = document.getElementById("bottom1");//此句控制兼容FF top0.onmouseover=function(){marquee3.Direction=2} top0.onmouseout=top0.onmouseup=function(){marquee3.Step=marquee3.BakStep} top0.onmousedown=bottom1.onmousedown=function(){marquee3.Step=marquee3.BakStep+2} bottom1.onmouseover=function(){marquee3.Direction=3} bottom1.onmouseout=bottom1.onmouseup=function(){marquee3.Step=marquee3.BakStep} </script> </body> </html>
提示:您可以先修改部分代码再运行
这就是签名吗
积分
576
阅读权限
50
性别
男
在线时间
679 小时
注册时间
2007-4-28
最后登录
2008-8-22
查看详细资料
TOP
做西部数码代理.Cn1元国际45元
jiangxin85
[楼主]
燃烧的海平面
高级会员
帖子
562
体力
576
威望
0
当前
北京 海淀区
发短消息
加为好友
专长
前端制作
2
#
大
中
小
发表于 2008-5-31 11:00
JS高手来帮帮忙啊
这就是签名吗
积分
576
阅读权限
50
性别
男
在线时间
679 小时
注册时间
2007-4-28
最后登录
2008-8-22
查看详细资料
TOP
【美橙超级G空间】688元绑定10个子目录
|
500M免费网盘空间,文件永久保留,专业服务高端设计人员
livetop
初级会员
帖子
32
体力
98
威望
0
离线
42 天
发短消息
加为好友
3
#
大
中
小
发表于 2008-5-31 11:05
我也想知道
帮你顶一下
希望你做好后,发个代码到我邮箱里,谢谢!
lizhenwu@Jianshuo.com
积分
98
阅读权限
20
在线时间
12 小时
注册时间
2005-12-15
最后登录
2008-7-11
查看详细资料
TOP
请大家尊重和保护奥运知识产权。
jiangxin85
[楼主]
燃烧的海平面
高级会员
帖子
562
体力
576
威望
0
当前
北京 海淀区
发短消息
加为好友
专长
前端制作
4
#
大
中
小
发表于 2008-5-31 19:32
为什么没人来回答啊
求助中...
这就是签名吗
积分
576
阅读权限
50
性别
男
在线时间
679 小时
注册时间
2007-4-28
最后登录
2008-8-22
查看详细资料
TOP
您知道经典
哪些会员写过书的
吗?
您知道互联网
职业和技能有哪些
吗?
您知道
网站运营核心是什么
吗?
hbfgh77
新手上路
帖子
16
体力
30
威望
0
离线
19 天
发短消息
加为好友
5
#
大
中
小
发表于 2008-6-27 15:31
做得还好,不需要这样,其实在Flash里面也可以产生这样的效果,用十几句脚本代码也可以解决!
积分
30
阅读权限
10
在线时间
6 小时
注册时间
2008-3-14
最后登录
2008-8-3
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
版块跳转
内部交流区
网站开发区
前台制作与脚本专栏
后台数据库编程
WEB标准化专栏
WAP 技术专栏
平面设计区
艺术与设计论坛
Adobe Photoshop 专栏
Fireworks 专栏
矢量图形专栏
插画手绘交流
交互设计区
用户体验综合版
UI图形设计
RIA设计与应用
Flash 8 及之前版本
Flash CS3 及 AS3
Silverlight 专版
Director 专栏
其它技术讨论区
计算机技术
英语学习和技术翻译
摄影欣赏与技术交流
无线通讯与数码设备
信息平台
企业招聘
学习工作交流区
创业版