版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1、4个方向的无间歇滚动和间歇滚动<!-把下面代码加到<head>与</head>之间-><style type="text/css">a,body,selectfont-size:12px;text-decoration:none;</style><script type="text/javascript">/*通用不间断滚动JS封装类*深蓝蝴蝶*使用方法*new Marquee("marquee",0,1,760,52,50,5000,3000)*new Marq
2、uee("marquee",0,1,760,104,50,5000,3000,52)*参数说明:*参数1marquee容器ID*参数20向上滚动(0-向上 1-向下 2-向左 3-向右)*参数31滚动的步长(数值越大,滚动越快)*参数4760容器可视宽度*参数552容器可视高度*参数650定时器(数值越小,滚动的速度越快 1000=1秒,建议不小于20)*参数75000间歇停顿延迟时间(0为不停顿,1000=1秒)*参数83000开始时的等待时间(0为不等待,1000=1秒)*参数9(52)间歇滚动间距(可选,该数值与延迟均为0则为鼠标悬停控制)*使用建议:*1、建议直接赋
3、予容器的显示区域的宽度和高度，*如(<div id="marquee" style="width:760px;height:52px;">.</div>)*2、建议为容器添加样式overflow=auto，*如(<div id="marquee" style="width:760px;height:52px;overflow:auto;">.</div>)*3、为了更准确的获取滚动区域的宽度和高度，请尽可能将各滚动单位直接赋予正确宽高度*4、对于TABLE标记的横向滚
4、动，需要对TABLE添加样式display=inline，*如(<div id="marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">.</table></div>)*5、对于翻屏滚动或间歇滚动，要注意各滚动单位间的间距，*同时需要对容器的可视高度和可视宽度做好准确的设置，对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整*6、对于LI自动换行的问题暂
5、时没有更好的解决办法，建议将其转换成表格(TABLE)的形式来达到同等的效果*注意：仅用div的时候需要用<nobr>来包括div*/var Marquee=function()this.ID=document.getElementById(arguments0);this.Direction=arguments1;this.Step=arguments2;this.BakStep=arguments2;this.Width=arguments3;this.HalfWidth=Math.round(arguments3/2);this.Height=arguments4;this.
6、Timer=arguments5;this.DelayTime=arguments6;this.WaitTime=arguments7;if(arguments8 | arguments8=0)this.ScrollStep=arguments8;elsethis.ScrollStep=this.Direction>1?this.Width:this.Height;this.Correct=0;this.CTL=0;this.StartID=0;this.Stop=0;this.MouseOver=0;this.ID.style.overflow="hidden"th
7、is.ID.style.overflowX="hidden"this.ID.style.overflowY="hidden"this.ID.noWrap=true;this.ID.style.width=this.Width+"px"this.ID.style.height=this.Height+"px"this.ClientScroll=this.Direction>1?parseInt(this.ID.scrollWidth):parseInt(this.ID.scrollHeight);this.ID
8、.innerHTML+=this.ID.innerHTML;this.IsNotOpera=(navigator.userAgent.toLowerCase().indexOf("opera")=-1);if(arguments.length>=8)this.Start(this,this.Timer,this.DelayTime,this.WaitTime);Mtotype.Start=function(msobj,timer,delaytime,waittime)msobj.StartID=function()msobj.Scroll();ms
9、obj.Continue=function()if(msobj.MouseOver=1)setTimeout(msobj.Continue,delaytime);elseclearInterval(msobj.TimerID);msobj.CTL=0;msobj.Stop=0;msobj.TimerID=setInterval(msobj.StartID,timer);msobj.Pause=function()msobj.Stop=1;clearInterval(msobj.TimerID);setTimeout(msobj.Continue,delaytime);msobj.Begin=f
10、unction()msobj.ID.onmousemove=function(evt)if(msobj.ScrollStep=0 && msobj.Direction>1)var event=null;if(window.event)event=window.event;if(msobj.IsNotOpera)msobj.EventLeft=event.srcElement.id=msobj.ID.id?parseInt(event.offsetX)-parseInt(msobj.ID.scrollLeft):parseInt(event.srcElement.offse
11、tLeft)-parseInt(msobj.ID.scrollLeft)+parseInt(event.offsetX);elsemsobj.ScrollStep=null;return;elseevent=evt;msobj.EventLeft=parseInt(event.layerX)-parseInt(msobj.ID.scrollLeft);msobj.Direction=msobj.EventLeft>msobj.HalfWidth?3:2;msobj.AbsCenter=Math.abs(msobj.HalfWidth-msobj.EventLeft);msobj.Step
12、=Math.round(msobj.AbsCenter*(msobj.BakStep*2)/msobj.HalfWidth);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)clearInt
13、erval(msobj.TimerID);msobj.TimerID=setInterval(msobj.StartID,timer);msobj.TimerID=setInterval(msobj.StartID,timer);setTimeout(msobj.Begin,waittime);Mtotype.Scroll=function()if(this.Correct=0 && this.CTL>this.ClientScroll)this.ClientScroll=(this.Direction>1)?Math.round(parseIn
14、t(this.ID.scrollWidth)/2):Math.round(parseInt(this.ID.scrollHeight)/2);this.Correct=1;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;elseif(this.ID.scrollTop&g
15、t;=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;elseif(this.ID.scrollTop<=0)this.ID.sc
16、rollTop+=this.ClientScroll;this.ID.scrollTop-=this.Step;break;case 2:this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0)this.ID.scrollLeft+=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;elseif(this.ID.scrollLeft>=this.ClientScroll)this.ID.scrollLeft-=thi
17、s.ClientScroll;this.ID.scrollLeft+=this.Step;break;case 3:this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0)this.ID.scrollLeft-=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;elseif(this.ID.scrollLeft<=0)this.ID.scrollLeft+=this.ClientScroll;this.ID.scro
18、llLeft-=this.Step;break;this.ID.scrollTop+="px"this.ID.scrollLeft+="px"</script></head><body><!-把下面代码加到<body>与</body>之间-><span style="color:#ff0000">仅用div的时候需要用<nobr>来包括div</span><fieldset style="padding:5px;
19、width:770px"><legend>不间断滚动实例</legend><center>鼠标悬停控制，左移鼠标，向左移动；反之亦然。<nobr><div id="marqueedivmouse" style="width:760px;overflow:auto;"><img src=" style="width:126px;height:138px" border="0" hspace="1">&
20、lt;img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspa
21、ce="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" bord
22、er="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></div></nobr><br><hr><br>文字翻屏滚动<br />需要文字内容高度大于div定义的高度，如果小了，则无法移动。<div id="textdiv" style="border
23、:1 solid #c0c0c0;text-align:left;width:760px;height:42px;overflow:hidden;">隐形的翅膀<br />每一次<br />都在徘徊孤单中坚强<br />每一次<br />就算很受伤<br />也不闪泪光<br />我知道<br />我一直有双隐形的翅膀<br />带我飞<br />飞过绝望<br />不去想<br />他们拥有美丽的太阳<br />我看见<br /
24、>每天的夕阳<br />也会有变化<br />我知道<br />我一直有双隐形的翅膀<br />带我飞<br />给我希望<br />我终于<br />看到<br />所有梦想都开花<br />追逐的年轻<br />歌声多嘹亮<br />我终于<br />翱翔<br />用心凝望不害怕<br />哪里会有风<br />就飞多远吧<br />隐形的翅膀<br />让梦恒久比天长<br
25、 />留一个<br />愿望<br />让自己想象</div><br><hr><br>文字间歇滚动<br />需要文字内容高度大于div定义的高度，如果小了，则无法移动。<div id="textdiv1" style="border:1 solid #c0c0c0;text-align:left;width:760px;height:42px;overflow:hidden;">隐形的翅膀<br />每一次<br />都在徘徊孤
26、单中坚强<br /></div><br><hr><br>向上翻屏滚动<div id="marqueediv1" style="width:760px;height:138px;overflow:hidden;"><table width="640" border="0" cellspacing="0" cellpadding="0" align="center"> <
27、tr> <td height="52" align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"
28、><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr> <tr> <td height="52" align="center
29、" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:
30、138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr></table></div><br><hr><br>向下翻屏滚动<div id="marqueediv2" style="widt
31、h:760px;height:138px;overflow:hidden;"><table width="640" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td height="52" align="center" valign="middle"><img src=" style=
32、"width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><
33、img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr> <tr> <td height="52" align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0&qu
34、ot; hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px&qu
35、ot; border="0" hspace="1"></td> </tr></table></div><br><hr><br>向左翻屏滚动<nobr><div id="marqueediv3" style="width:640px;height:138px;overflow:hidden;"><img src=" style="width:126px;height:138px&
36、quot; border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="widt
37、h:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=&q
38、uot; style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></div></nobr><br><hr><br>向右翻屏滚动<nobr><div id="marqueediv
39、4" style="width:640px;height:138px;overflow:hidden;"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=&qu
40、ot; style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1&quo
41、t;><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0&quo
42、t; hspace="1"></div></nobr><br><hr><br>向上连续滚动<div id="marqueediv5" style="width:760px;height:138px;overflow:hidden;"><table width="640" border="0" cellspacing="0" cellpadding="0" align=&qu
43、ot;center"> <tr> <td height="52" align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0&qu
44、ot; hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr> <tr> <td height="52&
45、quot; align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style=&
46、quot;width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr></table></div><br><hr><br>向左连续滚动<nobr><div id=&quo
47、t;marqueediv6" style="width:760px;height:138px;overflow:hidden;"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><
48、;img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace
49、="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border
50、="0" hspace="1"></div></nobr><br><hr><br>向上间歇滚动<div id="marqueediv7" style="width:760px;height:138px;overflow:hidden;"><table width="640" border="0" cellspacing="0" cellpadding="0&quo
51、t; align="center"> <tr><td height="52" align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border
52、="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr> <tr><td height
53、="52" align="center" valign="middle"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"><img src=&quo
54、t; style="width:126px;height:138px" border="0" hspace="1"><img src=" style="width:126px;height:138px" border="0" hspace="1"></td> </tr></table></div><br><hr><br>向左间歇滚动<nobr><div id="marqueediv8&
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年中国不锈钢行业发展展望及投资策略报告
- 纺织染色机操作工变革管理水平考核试卷含答案
- 浆染联合机挡车工安全综合模拟考核试卷含答案
- 酒精酿造工道德知识考核试卷含答案
- 织布上轴工安全风险竞赛考核试卷含答案
- 《GB-T 40908-2021家具产品及其材料中禁限用物质测定方法 阻燃剂》专题研究报告
- 再生物资回收挑选工变更管理强化考核试卷含答案
- 送受话器装调工岗位设备技术规程
- 焊接设备装配调试工安全生产规范水平考核试卷含答案
- 异戊橡胶装置操作工现场作业技术规程
- 医用高压氧舱项目可行性实施报告
- 人教版九年级上册数学-圆-几何综合易错题(文本版-含答案)
- 学习2024年《关于加强社会组织规范化建设推动社会组织高质量发展的意见》解读课件
- GB/T 15688-2024动植物油脂不溶性杂质含量的测定
- 2024年江西省“振兴杯”食品安全管理师竞赛考试题库（含答案）
- 2024年吉林省中考语文试卷真题（含答案）
- MOOC 医事法学-西南医科大学 中国大学慕课答案
- 重庆大学材料科学与工程学院《833土木工程材料》历年考研真题汇编
- 2024年上海春考语文试题及参考答案作文范文（搜集整理版）
- 《农业保险承保理赔电子化作业规范》
- 中国科学院大学2023年619物理化学（甲）考研真题（含答案）
评论
0/150
提交评论