资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版
第一个 文字上下间隔滚动 修正版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>符合WEB标准的文字间隔滚动JS代码</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- body,td,th { font-size: 12px; color: #333333; } a { font-size: 12px; color: #333333; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; color: #FF3300; } a:active { text-decoration: none; } body,div{margin:0; padding:0} --> </style></head> <body> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Avar%20marqueeContent%3Dnew%20Array()%3B%20%2F%2F%E6%BB%9A%E5%8A%A8%E6%96%B0%E9%97%BB%20%0D%0AmarqueeContent%5B0%5D%3D'%3Cfont%20color%3D%22%230000CC%22%3E14%3A25%20%3C%2Ffont%3E%3Ca%20href%3D%22http%3A%2F%2Fwww.glzy8.com%2Ftools%2Fhtml-js.htm%22%20target%3D%22_blank%22%3EHTML%2FJS%E4%BA%92%E7%9B%B8%E8%BD%AC%E6%8D%A2%E5%B7%A5%E5%85%B7-IE7%E5%85%BC%E5%AE%B9%E7%89%88%3C%2Fa%3E'%3B%20%0D%0AmarqueeContent%5B1%5D%3D'%3Cfont%20color%3D%22%230000CC%22%3E14%3A25%20%3C%2Ffont%3E%3Ca%20href%3D%22http%3A%2F%2Fwww.glzy8.com%2Ftools%2Fcssyasuo.shtml%22%20target%3D%22_blank%22%3Ecss%20%E5%9C%A8%E7%BA%BF%E5%8E%8B%E7%BC%A9%E5%B7%A5%E5%85%B7%3C%2Fa%3E'%3B%20%0D%0AmarqueeContent%5B2%5D%3D'%3Cfont%20color%3D%22%230000CC%22%3E14%3A25%20%3C%2Ffont%3E%3Ca%20href%3D%22http%3A%2F%2Fwww.glzy8.com%2Fcsstidy%2Fcss_optimiser.php%3Flang%3Dzh%22%20target%3D%22_blank%22%3ECSS%E6%95%B4%E5%BD%A2%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%8C%96%E5%B7%A5%E5%85%B7%5B%E5%8E%8B%E7%BC%A9%5D%20%3C%2Fa%3E'%3B%20%0D%0AmarqueeContent%5B3%5D%3D'%3Cfont%20color%3D%22%230000CC%22%3E14%3A25%20%3C%2Ffont%3E%3Ca%20href%3D%22http%3A%2F%2Fwww.glzy8.com%2Ftools%2Fjsmin%2Findex.htm%22%20target%3D%22_blank%22%3EJS%20Minifier%20js%E5%8E%8B%E7%BC%A9%3C%2Fa%3E'%3B%20%0D%0Avar%20marqueeInterval%3Dnew%20Array()%3B%20%2F%2F%E5%AE%9A%E4%B9%89%E4%B8%80%E4%BA%9B%E5%B8%B8%E7%94%A8%E8%80%8C%E4%B8%94%E8%A6%81%E7%BB%8F%E5%B8%B8%E7%94%A8%E5%88%B0%E7%9A%84%E5%8F%98%E9%87%8F%20%0D%0Avar%20marqueeId%3D0%3B%20%0D%0Avar%20marqueeDelay%3D2000%3B%20%2F%2F%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4%2C%E6%AF%AB%E7%A7%92%20%0D%0Avar%20marqueeHeight%3D18%3B%20%2F%2F%E5%AE%B9%E5%99%A8%E9%AB%98%E5%BA%A6%20%0D%0A%2F%2F%E6%8E%A5%E4%B8%8B%E6%9D%A5%E7%9A%84%E6%98%AF%E5%AE%9A%E4%B9%89%E4%B8%80%E4%BA%9B%E8%A6%81%E4%BD%BF%E7%94%A8%E5%88%B0%E7%9A%84%E5%87%BD%E6%95%B0%20%0D%0Afunction%20initMarquee()%20%7B%20%0D%0Avar%20str%3DmarqueeContent%5B0%5D%3B%20%0D%0Adocument.write('%3Cdiv%20id%3DmarqueeBox%20style%3D%22overflow%3Ahidden%3Bheight%3A'%2BmarqueeHeight%2B'px%3Bline-height%3A'%2BmarqueeHeight%2B'px%22%20onmouseover%3D%22clearInterval(marqueeInterval%5B0%5D)%22%20onmouseout%3D%22marqueeInterval%5B0%5D%3DsetInterval(%5C'startMarquee()%5C'%2CmarqueeDelay)%22%3E%3Cdiv%3E'%2Bstr%2B'%3C%2Fdiv%3E%3C%2Fdiv%3E')%3B%20%0D%0AmarqueeId%2B%2B%3B%20%0D%0AmarqueeInterval%5B0%5D%3DsetInterval(%22startMarquee()%22%2CmarqueeDelay)%3B%20%0D%0A%7D%20%0D%0Afunction%20startMarquee()%20%7B%20%0D%0Avar%20str%3DmarqueeContent%5BmarqueeId%5D%3B%20%0D%0AmarqueeId%2B%2B%3B%20%0D%0Aif(marqueeId%3E%3DmarqueeContent.length)%20marqueeId%3D0%3B%20%0D%0Aif(document.getElementById(%22marqueeBox%22).childNodes.length%3D%3D1)%20%7B%20%0D%0Avar%20nextLine%3Ddocument.createElement('DIV')%3B%20%0D%0AnextLine.innerHTML%3Dstr%3B%20%0D%0Adocument.getElementById(%22marqueeBox%22).appendChild(nextLine)%3B%20%0D%0A%7D%20%0D%0Aelse%20%7B%20%0D%0Adocument.getElementById(%22marqueeBox%22).childNodes%5B0%5D.innerHTML%3Dstr%3B%20%0D%0Adocument.getElementById(%22marqueeBox%22).appendChild(document.getElementById(%22marqueeBox%22).childNodes%5B0%5D)%3B%20%0D%0Adocument.getElementById(%22marqueeBox%22).scrollTop%3D0%3B%20%0D%0A%7D%20%0D%0AclearInterval(marqueeInterval%5B1%5D)%3B%20%0D%0AmarqueeInterval%5B1%5D%3DsetInterval(%22scrollMarquee()%22%2C20)%3B%20%0D%0A%7D%20%0D%0Afunction%20scrollMarquee()%20%7B%20%0D%0Adocument.getElementById(%22marqueeBox%22).scrollTop%2B%2B%3B%20%0D%0Aif(document.getElementById(%22marqueeBox%22).scrollTop%25marqueeHeight%3D%3D(marqueeHeight-1))%7B%20%0D%0AclearInterval(marqueeInterval%5B1%5D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0AinitMarquee()%3B%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
第二个firefox下运行有些问题。但学习js的朋友可以看下主要是看思路。
<!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>JS文字间隔性滚动代码_适合做公告</title> <meta name="keywords" content="文字滚动,间隔滚动,文字上翻,JS代码" /> <meta name="description" content="JS实现文字间隔性滚动效果，适合做公告。" /> <style type="text/css"> <!-- body{ font-size:12px;} #shangfan{font-family: 新宋体, 宋体, 仿宋_GB2312;font-size: 12px; line-height:24px; height:24px; width:400px; border:solid 1px #ccc;overflow:hidden;} #shangfan ul{margin: 0px 10px;padding: 0px;list-style-type: none;} #shangfan ul li{/*文字超出本行，自动省略*/overflow:hidden;text-overflow:ellipsis;white-space: nowrap;margin:0;padding: 0px;} --> </style> </head> <body> <div id="shangfan"> <div id="holder"> <ul> <li><a href="http://www.glzy8.com/tools/packer.htm" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com%2Ftools%2Fpacker.htm" target="_blank">packer_至强的javascript在线加密工具</a></li> <li><a href="http://www.glzy8.com/tools/bihe/index.htm" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com%2Ftools%2Fbihe%2Findex.htm" target="_blank">XHTML 代码嵌套查看工具[标签闭合]</a></li> <li><a href="http://www.glzy8.com/tools/jinzhi.htm" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com%2Ftools%2Fjinzhi.htm" target="_blank">管理资源吧 在线进制转换 可以实现各类进制间</a></li> <li><a href="http://www.glzy8.com/tools/js_Debug.htm" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com%2Ftools%2Fjs_Debug.htm" target="_blank">在线JS脚本校验器检测js错误 </a></li> <li><a href="http://www.glzy8.com/tools/htmlto.htm" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com%2Ftools%2Fhtmlto.htm" target="_blank">将html转换为php,javascript和asp的在线工具</a></li> </ul></div> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20marquee(height%2Cspeed%2Cdelay)%7B%20%0D%0Avar%20scrollT%3B%20%0D%0Avar%20pause%20%3D%20false%3B%20%0D%0Avar%20ScrollBox%20%3D%20document.getElementById(%22shangfan%22)%3B%20%0D%0Aif(document.getElementById(%22holder%22).offsetHeight%20%3C%3D%20height)%20return%3B%20%0D%0Avar%20_tmp%20%3D%20ScrollBox.innerHTML.replace('holder'%2C%20'holder2')%20%0D%0AScrollBox.innerHTML%20%2B%3D%20_tmp%3B%20%0D%0AScrollBox.onmouseover%20%3D%20function()%7Bpause%20%3D%20true%7D%20%0D%0AScrollBox.onmouseout%20%3D%20function()%7Bpause%20%3D%20false%7D%20%0D%0AScrollBox.scrollTop%20%3D%200%3B%20%0D%0Afunction%20start()%7B%20%0D%0AscrollT%20%3D%20setInterval(scrolling%2Cspeed)%3B%20%0D%0Aif(!pause)%20ScrollBox.scrollTop%20%2B%3D%202%3B%20%0D%0A%7D%20%0D%0Afunction%20scrolling()%7B%20%0D%0Aif(ScrollBox.scrollTop%20%25%20height%20!%3D%200)%7B%20%0D%0AScrollBox.scrollTop%20%2B%3D%202%3B%20%0D%0Aif(ScrollBox.scrollTop%20%3E%3D%20ScrollBox.scrollHeight%2F2)%20ScrollBox.scrollTop%20%3D%200%3B%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0AclearInterval(scrollT)%3B%20%0D%0AsetTimeout(start%2Cdelay)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0AsetTimeout(start%2Cdelay)%3B%20%0D%0A%7D%20%0D%0Amarquee(24%2C30%2C3000)%3B%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程