為什么我的向左滾動(dòng)沒有效果呢 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實(shí)現(xiàn)文字向左滾動(dòng)</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;}
//為大盒子加上邊框，目的是為了讓字幕滾動(dòng)表現(xiàn)的更明顯
#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">
//這個(gè)<div id="scroller"></div>其實(shí)沒必要寫，是個(gè)多余的，只會(huì)造成代碼的冗余
<div id="scroller">
<div id="con1">js實(shí)現(xiàn)文字向左滾動(dòng)</div>
<div id="con2"></div>
</div>
</div>
<script>
var area=document.getElementById('box'),//這里獲取的應(yīng)該是最大的那個(gè)盒子
con1=document.getElementById('con1'),
con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;
area.scrollLeft = 0;
function scrollleft() {
//if的判斷條件里面，應(yīng)該是con1的自身寬度
if (area.scrollLeft>=con1.offsetWidth) {
area.scrollLeft = 0;//這個(gè)應(yīng)該是恢復(fù)到初始值
} 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>
這是我在你的代碼基礎(chǔ)上，更改的，你參考一下
2016-07-28
第一點(diǎn)：var area=document.getElementById('scroller'),你的變量獲取錯(cuò)了，應(yīng)該是這個(gè)
var area=document.getElementById('box'),
第二點(diǎn)：你的if里面的代碼寫錯(cuò)了，應(yīng)該是這個(gè)
if (area.scrollLeft>=con1.offsetWidth) {
area.scrollLeft = 0;
} else {
area.scrollLeft++;
}