当前位置: 首页 > 实例教程 > 脚本特效 > 滚动条 > 向上跑马灯

滚动条
内容淡入切换效果
从下往上翻滚的内容
内容淡入切换效果
半透明滚动
跑马灯效果
向上跑马灯
IFRAME 滚动条

滚动条 中的 向上跑马灯


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-07-27   浏览: 756 ::
收藏到网摘: n/a

向上跑马灯 - 软晨网(RuanChen.com)

内容在这

内容在这 内容在这 内容在这内容在这 内容在这 内容在这

第一步:在head区域放以下代码

<style type="text/css"> #marqueecontainer{ position: relative; width: 200px; /*marquee width */ height: 200px; /*marquee height */ background-color: white; overflow: hidden; border: 3px solid orange; padding: 2px; padding-left: 4px; } </style> <script type="text/javascript"> var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds) var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10) var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)? ////NO NEED TO EDIT BELOW THIS LINE//////////// var copyspeed=marqueespeed var pausespeed=(pauseit==0)? copyspeed: 0 var actualheight='' function scrollmarquee(){ if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" else cross_marquee.style.top=parseInt(marqueeheight)+8+"px" } function initializemarquee(){ cross_marquee=document.getElementById("vmarquee") cross_marquee.style.top=0 marqueeheight=document.getElementById("marqueecontainer").offsetHeight actualheight=cross_marquee.offsetHeight if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit cross_marquee.style.height=marqueeheight+"px" cross_marquee.style.overflow="scroll" return } setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll) } if (window.addEventListener) window.addEventListener("load", initializemarquee, false) else if (window.attachEvent) window.attachEvent("onload", initializemarquee) else if (document.getElementById) window.onload=initializemarquee </script>

第二步:在body里放显示代码

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"> <div id="vmarquee" style="position: absolute; width: 98%;"> <h4>内容</h4> </div> </div>

评论 (0) All

登陆 | 还没注册?