向左滚动无效
<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>
慕哥1038968浏览 1321回答 2
2回答
-
慕哥1038968
<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>
随时随地看视频慕课网APP
相关分类
JavaScript