Js间断/连续的文字滚动代码

Js文字滚动代码，可设置间断滚动和连续滚动。滚动时是向上滚动的，控制Li列表滚动，兼容性表现地不错，兼容IE/火狐、Opera等浏览器，代码如下：

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

02 <html>

03 <head>

04 <title>文字间隔滚动代码-兼容IE和FireFox</title>

05 <style type="text/css">

06 

37 </style>

38 </head>

39 <body>

40 <div id="andyscroll">

41 <div id="scrollmessage">

42 <UL>

43 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>

44 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>

45 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>

46 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>

47 <li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>

48 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>

49 <li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>

50 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>

51 <ul>

52 </div>

53 </div>

54 <script type="text/javascript">

55 var stopscroll = false;

56 var scrollElem = document.getElementById("andyscroll");

57 var marqueesHeight = scrollElem.style.height;

58 scrollElem.onmouseover = new Function('stopscroll = true');

59 scrollElem.onmouseout = new Function('stopscroll = false');

60 var preTop = 0;

61 var currentTop = 0;

62 var stoptime = 0;

63 var leftElem = document.getElementById("scrollmessage");

64 scrollElem.appendChild(leftElem.cloneNode(true));

65 init_srolltext();

66 function init_srolltext(){

67     scrollElem.scrollTop = 0;

68     setInterval('scrollUp()', 35);//确定滚动速度的, 数值越小, 速度越快

69 }

70 function scrollUp(){

71     if(stopscroll) return;

72     currentTop += 1; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动

73     if(currentTop == 19) {

74         stoptime += 1;

75         currentTop -= 1;

76         if(stoptime == 180) {

77             currentTop = 0;

78             stoptime = 0;

79         }

80     }else{

81         preTop = scrollElem.scrollTop;

82         scrollElem.scrollTop += 1;

83         if(preTop == scrollElem.scrollTop){

84             scrollElem.scrollTop = 0;

85             scrollElem.scrollTop += 1;

86         }

87     }

88 }

89 </script>

90 </body>

91 </html>

posted @ 2015-07-12 01:53 lizonghai 阅读(4135) 评论(0) 编辑收藏举报

刷新页面返回顶部