错误纸标

Javascript无缝滚动效果如下图：

测试环境（成功）：

IE9，IE11，chrome

代码如下：

js部分：

var speed = 40;
window.onload=function(){
	var demo=document.getElementById("demo");
	var demo2=document.getElementById("demo2");
	var demo1=document.getElementById("demo1");
	demo2.innerHTML = demo1.innerHTML;
	function Marquee(){if(demo.scrollTop>=demo1.offsetHeight){
			demo.scrollTop=0;
		}
		else{
			demo.scrollTop=demo.scrollTop+1;
		}
	}
	var MyMar=setInterval(Marquee,speed);
	demo.onmouseover=function(){clearInterval(MyMar)};
	demo.onmouseout=function(){MyMar=setInterval(Marquee,speed); };

}

css部分：

body{font-size:12px;margin:0;padding:0;}
#demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative;border:1px solid #000;}
#demo1{height:auto; text-align:left;}
#demo2{height:auto; text-align:left;}
ul{margin:0;padding:0}
#demo1 li, #demo2 li{list-style-type:none; height:22px; text-align:left;}

html部分：

<div id="demo">
    <div id="demo1">
    	<ul>
            <li><a href="#" target="_blank">错误纸标欢迎您的到来</a></li>
            <li><a href="#" target="_blank">只有努力才会有美好的明天</a></li>
            <li><a href="#" target="_blank">没有人一开始就是高手，都是从菜鸟开始</a></li>
            <li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li>
            <li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li>
            <li><a href="#" target="_blank">今天你写代码了吗</a></li>
            <li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li>
        </ul>
    </div>
    <div id="demo2"></div>
</div>

打赏

微信扫一扫，打赏作者吧～