用原生JS实现maquee
<!DOCTYPE HTML>
<html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<head>
<style type="text/css">
ul{
margin:0;
}
div {
overflow: hidden;
width: 75px;
height: 100px;
margin-left: 29%;
margin-top: 10%;
background: aqua;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无缝滚动</title>
</head>
<body>
<div id="ca">
<ul id="c1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul id="c2"></ul>
</div>
</body>
<script language="javascript" type="text/javascript">
var c1=document.getElementById("c1");
var c2=document.getElementById("c2");
var ca=document.getElementById("ca");
c2.innerHTML=c1.innerHTML;
var cas=null;
window.onload=function(){
st();
}
cas=setInterval('st()',50);
function st(){
if(ca.scrollTop>=c1.offsetHeight){
ca.scrollTop=0;
}else{
ca.scrollTop++;
}
ca.onmouseover=function() {
clearInterval(cas);
}
ca.onmouseout=function() {
cas=setInterval('st()',50);
}
}
</script>
</html>