小虎博客

A-A+

文字图片向上滚动的JS代码

2016年10月15日 编程技术 暂无评论

文字图片向上滚动是很多网站像通知，公告都会用到的一种效果了，下面我来来给大家收藏了两种文字图片向上滚动的JS代码有需要的朋友可参考。

代码一:

  1. <div id="demo">  
  2. <div id="demo1">  
  3. <ul>  
  4. <li>  
  5. 文字图片内容  
  6. </li>  
  7. </ul>  
  8. </div>  
  9. <div id="demo2"></div>  
  10. <script type="text/javascript">  
  11. var speed=10;  
  12. var FGDemo=document.getElementById('demo');  
  13. var FGDemo1=document.getElementById('demo1');  
  14. var FGDemo2=document.getElementById('demo2');  
  15. FGDemo2.innerHTML=FGDemo1.innerHTML  
  16. function Marquee1(){  
  17. if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)  
  18. FGDemo.scrollTop-=FGDemo1.offsetHeight  
  19. else{  
  20. FGDemo.scrollTop++  
  21. }  
  22. }  
  23. var MyMar1=setInterval(Marquee1,speed)  
  24. FGDemo.onmouseover=function() {clearInterval(MyMar1)}  
  25. FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}  
  26. </script>  
  27. </div>  

代码二,如下:

  1. <SCRIPT LANGUAGE="JavaScript">  
  2. <!-- Begin  
  3. //scroller width  
  4. var swidth=300  
  5. //scroller height  
  6. var sheight=100  
  7. //scroller's speed;  
  8. var sspeed=2  
  9. var wholemessage=''  
  10. //text: change to your own  
  11. wholemessage='<div align="center"><font face=Arial size=3 color="#ffffff">站长特效网</DIV><div align="center">专注于网页特效及广告代码，供站长和js爱好者参考。</strong></DIV><div align="center"><strong>站长必备js特效代码 </strong></DIV><div align="center">打造国内最帅的网页特效站。</div><div align="center">欢迎光临www.zzjs.net</div></font>'  
  12. function start(){  
  13. if (document.all) return  
  14. if (document.getElementById){  
  15. document.getElementById("slider").style.visibility="show"  
  16. ns6marquee(document.getElementById('slider'))  
  17. }  
  18. else if(document.layers){  
  19. document.slider1.visibility="show"  
  20. ns4marquee(document.slider1.document.slider2)  
  21. }  
  22. }  
  23. function ns4marquee(whichlayer){  
  24. ns4layer=eval(whichlayer)  
  25. ns4layer.document.write(wholemessage)  
  26. ns4layer.document.close()  
  27. sizeup=ns4layer.document.height  
  28. ns4layer.top-=sizeup  
  29. ns4slide()  
  30. }  
  31. function ns4slide(){  
  32. if (ns4layer.top>=sizeup*(-1)){  
  33. ns4layer.top-=sspeed  
  34. setTimeout("ns4slide()",100)  
  35. }  
  36. else{  
  37. ns4layer.top=sheight  
  38. ns4slide()  
  39. }  
  40. }  
  41. function ns6marquee(whichdiv){  
  42. ns6div=eval(whichdiv)  
  43. ns6div.innerHTML=wholemessage  
  44. ns6div.style.top=sheight  
  45. sizeup=sheight  
  46. ns6slide()  
  47. }  
  48. function ns6slide(){  
  49. if (parseInt(ns6div.style.top)>=sizeup*(-1)){  
  50. ns6div.style.top=parseInt(ns6div.style.top)-sspeed  
  51. setTimeout("ns6slide()",100)  
  52. }  
  53. else{  
  54. ns6div.style.top=sheight  
  55. ns6slide()  
  56. }  
  57. }  
  58. //  End -->  
  59. </script>  
  60. <body bgcolor="#fef4d9" onLoad='start()'>  
  61. <span style="borderWidth:1; borderColor:red; width:300; height:100;">  
  62. <ilayer width=300 height=100 name="slider1" bgcolor="black" visibility=hide>  
  63. <layer name="slider2" onMouseover="sspeed=0;" onMouseout="sspeed=2">  
  64. </layer>  
  65. </ilayer>  
  66. <script language="JavaScript">  
  67. if (document.all){  
  68. document.writeln('<marquee id="ieslider" scrollAmount=2 width=300 height=100 direction=up style="border:1 solid red;background-color:black">')  
  69. document.writeln(wholemessage)  
  70. ieslider.onmouseover=new Function("ieslider.scrollAmount=0")  
  71. ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=2")  
  72. document.write('</marquee>')  
  73. }  
  74. if (document.getElementById&&!document.all){  
  75. document.write('<div style="position:relative;overflow:hidden;width:300;height:100;clip:rect(0 302 102 0); background-color:black;border:1px solid red;" onMouseover="sspeed=0;" onMouseout="sspeed=2">')  
  76. document.write('<div id="slider" style="position:relative;width:&{swidth};">')  
  77. document.write('</div></div>')  
  78. }//xiaohuboke.com  
  79. </script></span>  
  80. </body>  
标签：

给我留言