快捷導(dǎo)航

JS無(wú)縫滾動(dòng)效果實(shí)現(xiàn)方法分析

更新時(shí)間：2016年12月21日 09:01:27 作者：鬼畜十三

這篇文章主要介紹了JS無(wú)縫滾動(dòng)效果實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了無(wú)縫滾動(dòng)的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS無(wú)縫滾動(dòng)效果實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

效果：

1.默認(rèn)緩慢往左滾動(dòng)

2.放到左箭頭上還是向左滾動(dòng)，放到右箭頭上向右滾動(dòng)

3.放到圖片上停止?jié)L動(dòng)，移出繼續(xù)滾動(dòng)

思路：

1.計(jì)算圖片列表ul的寬度

2.開啟定時(shí)器，使其向左邊距不斷增大，造成向左運(yùn)動(dòng)的效果

3.圖片列表復(fù)制一份，向左移動(dòng)時(shí)，當(dāng)左邊距大于一份的寬度時(shí)，把它的左邊距拉回到0。向右移動(dòng)時(shí)，當(dāng)左邊距大于0時(shí)，把它的左邊距拉到整個(gè)兩份圖片列表一半的寬度（即一份的寬度）。（拉的瞬間很快，用戶察覺(jué)不到，造成一種無(wú)縫滾動(dòng)的假象）

4.offsetLeft值的正負(fù)決定往哪邊移動(dòng)

5.放到圖片上停止這個(gè)定時(shí)器，移開再開啟

window.onload=function(){
 var odiv=document.getElementById('div');
 var oul=odiv.getElementsByTagName('ul')[0];
 var oli=oul.getElementsByTagName('oul');
 var btn=document.getElementsByTagName('btn');
 var ispeed=-1;
 var timer=null;
 oul.innerHTML+=oul.innerHTML; //圖片列表復(fù)制一份
 oul.style.width=oli[0].offsetWidth*oli.length+'px'; //不算出ul的寬度的話，運(yùn)動(dòng)過(guò)程中后面的會(huì)先出現(xiàn)再加載圖片，有一種不流暢感，切圖片過(guò)多會(huì)分行，由外面的div決定寬度
 timer=setInterval(function(){
  oul.style.left=oul.offsetLeft+ispeed+'px';  //offsetLeft輸出的是數(shù)字不帶單位,右邊也用oul.style.left輸出的是字符串，而不是數(shù)值，而且它取得是行間樣式，無(wú)用
  if(oul.offsetLeft<-oul.offsetWidth/2){ //判斷時(shí)也可以用.style.left或.style.width？（不確定）
   oul.style.left=0;
  }
  else if(oul.offsetLeft>0){
   oul.style.left=-oul.offsetWidth/2;
  }
 ),30};
 btn[0].onmouseover=function(){
  ispeed=-1;
 };
 btn[1].onmouseover=function(){
  ispeed=1;
 };
 oul.onmouseover=function(){
  clearInterval(timer);
 };
 oul.onmouseout=function(){
  timer=setInterval(function(){
   oul.style.left=oul.offsetLeft+ispeed+'px';
   if(oul.offsetLeft<-oul.offsetWidth/2){
    oul.style.left=0;
   }
   else if(oul.offsetLeft>0){
    oul.style.left=-oul.offsetWidth/2;
   }
  ),30}; //如果把速度變大，而定時(shí)器的時(shí)間也變大是否可以達(dá)到相同效果呢？答案是不能。會(huì)變成一卡一卡
 };
};

注：這樣子取得的寬度是不包含margin的，所以圖片間邊距的寫法可以是li的寬度大于img的寬度，li的寬度-img的寬度，就是兩邊的邊距和

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: