JavaScript mencapai kemahiran effect_javascript menatal atas dan bawah yang lancar

Contoh dalam artikel ini menerangkan kod javascript untuk mencapai tatal ke atas dan ke bawah yang lancar, dan berkongsinya dengan semua orang untuk rujukan anda. Kandungan khusus adalah seperti berikut

Prinsip js untuk mencapai penatalan lancar ke atas dan ke bawah adalah seperti berikut:
1. Mula-mula tetapkan ketinggian atau lebar bekas, kemudian limpahan:tersembunyi
2. Selepas ketinggian bekas ditetapkan, kandungan akan disembunyikan jika melebihinya.
3. Tukar nilai atribut scrollTop (tatal ke atas dan ke bawah) bekas untuk mengalihkan kandungan ke atas dan ke bawah dengan satu nod (prinsip menatal
). 4. Apabila tatal ketinggian tatal atas lebih besar daripada atau sama dengan ketinggian nod yang hendak ditatal, tetapkan tatal atas=0, gerakkan yang pertama dalam pepohon nod anak ke penghujung, dan mulakan semula tatal kesan tatal gelung yang tidak terganggu muncul.

Rendering adalah seperti berikut:

Kod adalah seperti berikut:

<div id="colee" style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
<div id="colee1">
<p>php</p>
<p>java</p>
<p>ruby</p>
<p>python</p>
<p>www.phpddt.com</p>
</div>
<div id="colee2"></div>
</div>
<script>
//速度设置
var speed=1;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
 colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
 }else{
 colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.