為什么我的向左滾動沒有效果呢 T_T
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dodument</title>
<style>
*{margin: 0; padding: 0; font-size: 12px;}
#box{width: 140px; height: 25px; margin: 50px auto; overflow: hidden;}
#scroller{width: 200%; height: 25px; margin: 0 auto auto 10px; line-height: 25px; white-space: nowrap; }
#scroller div{float: left; margin-left: 10px;}
</style>
</head>
<body>
<div id="box">
<div id="scroller">
<div id="con1">js實現文字向左滾動</div>
<div id="con2"></div>
</div>
</div>
<script>
var area=document.getElementById('scroller'),
con1=document.getElementById('con1'),
con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;
function scrollleft() {
if (area.scrollLeft-con2.offsetWidth>=0) {
area.scrollLeft-=con1.offsetWidth;
} else {
area.scrollLeft++;
}
}
var speed=50;
var myScroll=setInterval('scrollleft()',speed);
area.onmousemove=function () {
clearInterval(myScroll);
}
area.onmouseout=function () {
myScroll=setInterval('scrollleft()',speed);
}
</script>
</body>
</html>
2016-07-28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dodument</title>
<style>
*{margin: 0; padding: 0; font-size: 12px;}
//為大盒子加上邊框，目的是為了讓字幕滾動表現的更明顯
#box{width: 140px; height: 25px; margin: 50px auto; overflow: hidden; border: 1px solid #333333;}
#scroller{width: 200%; height: 25px; margin: 0 auto auto 10px; line-height: 25px; white-space: nowrap; }
#scroller div{float: left; /*margin-left: 10px;*/}
</style>
</head>
<body>
<div id="box">
//這個<div id="scroller"></div>其實沒必要寫，是個多余的，只會造成代碼的冗余
<div id="scroller">
<div id="con1">js實現文字向左滾動</div>
<div id="con2"></div>
</div>
</div>
<script>
var area=document.getElementById('box'),//這里獲取的應該是最大的那個盒子
con1=document.getElementById('con1'),
con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;
area.scrollLeft = 0;
function scrollleft() {
//if的判斷條件里面，應該是con1的自身寬度
if (area.scrollLeft>=con1.offsetWidth) {
area.scrollLeft = 0;//這個應該是恢復到初始值
} else {
area.scrollLeft++;
}
}
var speed=50;
var myScroll=setInterval(scrollleft,speed);
area.onmousemove=function () {
clearInterval(myScroll);
}
area.onmouseout=function () {
myScroll=setInterval(scrollleft,speed);
}
</script>
</body>
</html>
這是我在你的代碼基礎上，更改的，你參考一下
2016-07-28
第一點：var area=document.getElementById('scroller'),你的變量獲取錯了，應該是這個
var area=document.getElementById('box'),
第二點：你的if里面的代碼寫錯了，應該是這個
if (area.scrollLeft>=con1.offsetWidth) {
area.scrollLeft = 0;
} else {
area.scrollLeft++;
}