<html>
<head>
<title>向左无缝滚动</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
#box{
width: 400px;
height: 25px;
border: 1px solid #ccc;
line-height: 25px;
white-space:nowrap
}
span{
font-size: 20px
}
</style>
</head>
<body>
<div id="box">
<span id="con1">
吱吱吱吱吱吱吱吱吱吱吱吱吱吱吱吱吱吱吱吱吱吱吱吱
</span>
<span id="con2">
</span>
</div>
<script type="text/javascript">
var box=document.getElementById('box');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML
box.scrollLeft=0;
function scrollL(){
if(box.scrollLeft>=con1.offsetWidth){
box.scrollLeft=0;
}
else{
box.scrollLeft++;
}
}
var mysc=setInterval('scrollL()',30);
box.onmouseover=function(){
clearInterval(mysc)
}
box.onmouseout=function(){
mysc=setInterval('scrollL()',30)
}
</script>
</body>
</html>
2 回答
慕哥1038968
TA贡献3条经验 获得超0个赞
<html>
<head>
<title>向上无缝滚动</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
#box{
width: 400px;
height: 200px;
border: 1px solid #ccc;
text-align: center;
overflow: hidden;
}
li{
list-style: none;
font-size: 20px;
height: 25px;
}
</style>
</head>
<body>
<div id="box">
<ul id="con1">
<li> 2</li>
<li> 1</li>
<li> 1</li>
<li> 1</li>
<li> 1</li>
<li> 1</li>
<li> 1</li>
<li> 1</li>
<li> 1</li>
</ul>
<ul id="con2">
</ul>
</div>
<script type="text/javascript">
var box=document.getElementById('box');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;
box.scrollTop=0;
function scrollUp(){
if(box.scrollTop>=con1.offsetHeight){
box.scrollTop=0;
}
else{
box.scrollTop++;
}
}
var mysc=setInterval('scrollUp()',30);
box.onmouseover=function(){
clearInterval(mysc)
}
box.onmouseout=function(){
mysc=setInterval('scrollUp()',30)
}
</script>
</body>
</html>添加回答
举报
0/150
提交
取消