兼容IE和FireFox的间隔滚动代码
兼容IE和FireFox的间隔滚动代码
网上按这个标题搜索能搜到一大坨，其实没一个好用的，可见网上文章一大抄。自己改了改，调用方式参考例子，能适应一个页面内的多个不同的滚动。
调用应该挺简单的，可能稍微麻烦点的就是需要设置一下CSS
Source Code to Run
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
- <!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>
- <title>兼容IE和FireFox的间隔滚动代码</title>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <style type="text/css">
- <!--
- .scrolldiv {
- overflow: hidden;
- width: 600px;
- height: 18px;
- background: #E8F8F8;
- padding: 0 10px;
- }
- .scrollmessage {
- text-align: left;
- }
- .scrollmessage ul {
- margin: 0px;
- padding: 0px;
- list-style: none;
- }
- .scrollmessage li {
- height: 18px;
- line-height: 18px;
- }
- -->
- </style>
- </head>
- <body>
- <div id="scroll1" class="scrolldiv">
- <div class="scrollmessage">
- <ul>
- <li><a href="#">11111111111111111!</a></li>
- <li><a href="#">22222222222222222!</a></li>
- <li><a href="#">33333333333333333!</a></li>
- <li><a href="#">44444444444444444!</a></li>
- </ul>
- </div>
- </div>
- <div id="scroll2" class="scrolldiv">
- <div class="scrollmessage">
- <ul>
- <li><a href="#">11111111111111111!</a></li>
- <li><a href="#">22222222222222222!</a></li>
- <li><a href="#">33333333333333333!</a></li>
- <li><a href="#">44444444444444444!</a></li>
- </ul>
- </div>
- </div>
- <script language="JavaScript">
- <!--
- function scrollObject(marqueesHeight, elemId) {
- var stopscroll = false;
- var scrollElem = document.getElementById(elemId);
- with (scrollElem) {
- style.height = marqueesHeight;
- style.overflow = 'hidden';
- noWrap = true;
- }
- scrollElem.onmouseover = function() {
- stopscroll = true;
- }
- scrollElem.onmouseout = function() {
- stopscroll = false;
- }
- var divs = scrollElem.getElementsByTagName('div');
- var scrollmessage1;
- var scrollmessage2;
- if (divs.length > 0) {
- scrollmessage1 = divs[0];
- scrollmessage2 = scrollmessage1.cloneNode(true)
- scrollElem.appendChild(scrollmessage2);
- }
- var currentTop = 0;
- var stoptime = 0;
- var delaytime = 120;
- function init_srolltext() {
- scrollElem.scrollTop = 0;
- }
- this.start = function(s, delay) {
- init_srolltext();
- setDelay(delay);
- setInterval(s + '.scrollUp()', 10);
- }
- function setDelay(delay) {
- if (delay > 0) {
- delaytime = delay;
- }
- }
- this.scrollUp = function() {
- if (stopscroll) {
- return;
- }
- currentTop ++;
- if (currentTop == marqueesHeight + 1) { //控制停留时间
- stoptime ++;
- currentTop --;
- if(stoptime == delaytime) {
- currentTop = 0;
- stoptime = 0;
- }
- } else {
- if (scrollmessage2.offsetHeight - scrollElem.scrollTop <= 0) {
- scrollElem.scrollTop -= scrollmessage1.offsetHeight;
- scrollElem.scrollTop ++ ;
- }
- else{
- scrollElem.scrollTop ++;
- }
- }
- }
- }
- var scroll1 = new scrollObject(18, 'scroll1');
- scroll1.start('scroll1', 50); //停留间隔
- var scroll2 = new scrollObject(18, 'scroll2');
- scroll2.start('scroll2');
- //-->
- </script>
- </body>
- </html>
文章来自:
收藏到网摘:
Tags:
