欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)滑動(dòng)門效果的方法詳解

 更新時(shí)間:2016年12月19日 10:55:03   作者:鬼畜十三  
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)門效果的方法,結(jié)合實(shí)例形式分析了滑動(dòng)門效果的實(shí)現(xiàn)原理、步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)滑動(dòng)門效果的方法。分享給大家供大家參考,具體如下:

描述:鼠標(biāo)移動(dòng)到一副圖片上,會(huì)顯示該副圖片的全貌,而其他圖片會(huì)顯示概貌,效果圖如下:

一、沒有動(dòng)畫效果的運(yùn)動(dòng)

思路:

1.定好每張圖片的初始位置(第一張完全顯示,234只露出一部分)
2.計(jì)算每道門的移動(dòng)距離(即未顯露的部分)
3.綁定鼠標(biāo)滑過事件

window.onload=function(){
  var box=document.getElementById("box");
  var img=box.getElementsByTagName("img");
  //單張圖片寬度
  var imgWidth=img[0].offsetWidth;
  //露出的寬度
  var exposeWidth=160;
  //設(shè)置容器總寬度
  var boxWidth=imgWidth+exposeWidth*(img.length-1)
  box.style.width=boxWidth+"px";
  //設(shè)置圖片初始位置
  function setImgspos(){
    for(var i=1,len=img.length;i<len;i++){ //len在for循環(huán)的初始化語句里先定義好,這樣就不需要每次都計(jì)算img的個(gè)數(shù)了,比for(var i=1;i<img.length;i++)性能高
      img[i].style.left=imgWidth+exposeWidth*(i-1)+"px";
    }
  }
  setImgspos();
  //計(jì)算每道門打開時(shí)應(yīng)移動(dòng)的距離
  var translate=imgWidth-exposeWidth;
  for(var i=0,len=img.length;i<len;i++){
    (function(i){ //這里為什么需要匿名函數(shù)?(簡(jiǎn)單來說是函數(shù)變量作用域的問題)img[i].onmouseover=function(){}這個(gè)函數(shù)內(nèi)部使用了變量i,但是i沒有定義,于是向外查找,找到for循環(huán)里定義的i,點(diǎn)擊事件是for循環(huán)執(zhí)行完畢后才開始執(zhí)行的,即此時(shí)i=4,所以會(huì)報(bào)錯(cuò)img[i]沒有定義,這里加一層匿名函數(shù)相當(dāng)于閉包處理,i以形參的方式傳遞給內(nèi)層函數(shù)
      img[i].onmouseover=function(){
        setImgspos(); //每次移上去先重置位置
        for(var j=1;j<=i;j++){ //第二個(gè)循環(huán)體作用:可能會(huì)移多道門(比如放到第三道門上,二和三都要?jiǎng)?,不是只?dòng)三,另外第一道門永遠(yuǎn)不動(dòng))
          img[j].style.left=parseInt(img[j].style.left)-translate+"px";
        }
      };
    })(i); //這個(gè)i是實(shí)參
  }
};

二、展開加速、收攏減速的運(yùn)動(dòng)

注意:設(shè)置每道門初始位置時(shí),不需要在寫一個(gè)function了,因?yàn)橐謩e寫打開和關(guān)閉動(dòng)畫,會(huì)造成一個(gè)卡頓,瞬間閃爍。

思路:

1.需要鼠標(biāo)滑過這道門的初始位置
2.需要鼠標(biāo)滑過這道門的結(jié)尾位置
3.需要一個(gè)速度和定時(shí)器來完成緩緩移動(dòng)的過程

window.onload=function(){
  var box=document.getElementById("box");
  var img=box.getElementsByTagName("img");
  //單張圖片寬度
  var imgWidth=img[0].offsetWidth;
  //露出的寬度
  var exposeWidth=160;
  //設(shè)置容器總寬度
  var boxWidth=imgWidth+exposeWidth*(img.length-1)
  box.style.width=boxWidth+"px";
  //設(shè)置圖片初始位置
  for(var i=1,len=img.length;i<len;i++){
    img[i].pos=img[i].style.left=imgWidth+exposeWidth*(i-1)+"px";
  }
  function openDoor(el,translate){
    var begin=parseInt(el.pos);
    var end=begin-translate;
    var iSpeed=10;
    setTimeout(function(){
      el.style.left=parseInt(el.style.left)-iSpeed+"px"; //為什么不用begin?每次的初始位置會(huì)變
      iSpeed*=1.5;  //沒有這句話就是勻速運(yùn)動(dòng)
      if(parseInt(el.style.left)<=end){
        el.style.left=end+"px";
      }else{
        setTimeout(arguments.callee,25); //定時(shí)器有名字可以直接調(diào)用,沒名字,就用原生js方法arguments.callee
      }
    },25);
  };
  function closeDoor(el,translate){
    var begin=parseInt(el.pos)-translate; //關(guān)門默認(rèn)情況是張開的
    var end=begin+translate; //這里可以直接寫var end=parseInt(el.pos);
    var iSpeed=100;
    setTimeout(function(){
      el.style.left=parseInt(el.style.left)+iSpeed+"px"; //為什么不用begin?每次的初始位置會(huì)變
      iSpeed=Math.ceil(iSpeed*0.7); //沒有這句話就是勻速運(yùn)動(dòng)
      if(parseInt(el.style.left)>=end){
        el.style.left=end+"px";
      }else{
        setTimeout(arguments.callee,25); //定時(shí)器有名字可以直接調(diào)用,沒名字,就用原生js方法arguments.callee
      }
    },25);
  };
  var translate=imgWidth-exposeWidth;
  for(var i=0,len=img.length;i<len;i++){
    (function(i){
      img[i].onmouseover=function(){
        //開門 自己和自己左邊的全部循環(huán)到
        for(var j=1;j<=i;j++){
          openDoor(img[j],translate);
        }
        //關(guān)門 自己右邊的全部循環(huán)到
        for(var j=i+1;j<img.length;j++){
          closeDoor(img[j],translate);
        }
      };
    })(i);
  }
};

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《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ì)有所幫助。

相關(guān)文章

最新評(píng)論