船长 发表于 2009-03-31 01:30 | 分类:javascript | 阅读数:629 次
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=utf-8" /> <title>顶部滚动条</title> </head> <body> <marquee id="alertit" style="position:absolute;left:0px;top:0;background-color:#FFFFE6" onMouseover="this.scrollAmount=1" onMouseout="this.scrollAmount=speed"></marquee> <script type="text/javascript"> //Customize your message here. Use any HTML desired: var themsg='<span style="font:italic 22px Arial;color:red;"><b>Breaking News: Microsoft Stock up 10 points! Source: <a href="http://cnn.com" target="_new">CNN</a></b></span>' var speed=6 //speed of scroller (1-10 or more) var loops=2 //specify number of times message scrolls across screen (an integer or "infinite") function populatescroller(){ var windowwidth=iecompattest().clientWidth document.getElementById("alertit").innerHTML=themsg document.getElementById("alertit").style.width=windowwidth document.getElementById("alertit").scrollAmount=speed document.getElementById("alertit").scrollDelay=20 document.getElementById("alertit").loop=loops document.getElementById("alertit").onfinish=function(){ document.getElementById("alertit").style.visibility="hidden" } } function iecompattest(){ return (document.compatMode!="BackCompat")? document.documentElement : document.body } if (document.all && document.getElementById){ window.onload=populatescroller window.onresize=populatescroller } </script> <p align="center">代码整理:<a href="http://www.songlecn.com">web集结号-http://www.songlecn.com</a></p> </body> </html>
提示:你可以先修改部分代码再运行。
您的网名: * 必填
电子邮件: * 绝不会泄露
个人主页:
评论内容:
(Ctrl+Enter快捷回复)
web集结号致力于