Mengapa penatalan di sini tidak berterusan?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻滚动</title>
<style>
*{margin:0px;padding:0px}
</style>
</head>
<body>
<p style="height:100px"></p>
<p id="marquee" style="overflow:hidden;height:120px;width:220px;margin-left:20px;">
<p id="marqueecont">
<ul style="margin:0px;list-style:none;">
<li>标题标题标题标题标题标题1</li>
<li>标题标题标题标题标题标题2</li>
<li>标题标题标题标题标题标题3</li>
<li>标题标题标题标题标题标题4</li>
<li>标题标题标题标题标题标题5</li>
<li>标题标题标题标题标题标题6</li>
<li>标题标题标题标题标题标题7</li>
<li>标题标题标题标题标题标题8</li>
<li>标题标题标题标题标题标题9</li>
</ul>
</p>
<p id='marqueecont2'></p>
</p>
<script>
var marquee = document.getElementById('marquee');
var marqueecont = document.getElementById('marqueecont');
var marqueecont2 = document.getElementById('marqueecont2');
MarqTop(marquee,marqueecont,marqueecont2,30);
function MarqTop(marquee,marqueecont,marqueecont2,speed){
marqueecont2.innerHTML=marqueecont.innerHTML;
// 用这个函数这个滚动不连续
function Marquee(){
if(marqueecont.offsetTop<=marquee.scrollTop)
marquee.scrollTop-=marqueecont.offsetHeight;
else{
marquee.scrollTop++;
}
}
// 这个滚动是连续的
/*function Marquee(){
if(marquee.scrollTop>=marqueecont.offsetHeight){
marquee.scrollTop=0;
}else{
marquee.scrollTop++;
}
}*/
var MyMar=setInterval(Marquee,speed);
marquee.onmouseover=function() {clearInterval(MyMar);}
marquee.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
}
</script>
</body>
</html>
Untuk kelihatan lebih intuitif. . Saya menambah beberapa atribut css
Kemudian mari kita bercakap tentang sebab mengapa tatal berterusan tidak boleh dilakukan:
offsetTop ialah jarak relatif atas elemen yang nilainya ialah jarak elemen semasa offsetParent menentukan . . Anda merujuk kepada elemen marqueecont di sini, tetapi jika offsetParent tidak menyatakan , maka marqueecont.offsetTop ialah jarak relatif antara bahagian atas marqueecont dan outermost body# 🎜🎜#
Jadi pada masa ini marqueecont.offsetTop ialah 100 (jika anda klik pada saya untuk menambah sempadan, ia akan menjadi 102), kerana anda mempunyai p 100-tinggi di bahagian atas...Akhirnya, p di bahagian atas struktur HTML anda terlalu berlebihan. . Jika ditukar kepada di atas, anda boleh memadam 100 tinggi p
Kod terlalu panjang, bolehkah anda merakam fenomena itu sebagai gif?
Adalah disyorkan untuk melihat http://www.cnblogs.com/seven_...
Ketinggian ini agak sukar untuk difahami, hanya kerana ia terlalu serupa [air mata]