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

JS運(yùn)動(dòng)特效之任意值添加運(yùn)動(dòng)的方法分析

 更新時(shí)間：2018年01月24日 11:35:25   作者：關(guān)耳佳  
這篇文章主要介紹了JS運(yùn)動(dòng)特效之任意值添加運(yùn)動(dòng)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)多物體運(yùn)動(dòng)通過參數(shù)控制不同運(yùn)動(dòng)效果的實(shí)現(xiàn)方法,需要的朋友可以參考下

本文實(shí)例講述了JS運(yùn)動(dòng)特效之任意值添加運(yùn)動(dòng)的方法。分享給大家供大家參考，具體如下：

回顧一下上個(gè)例子JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法：

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 給每個(gè)li都添加一個(gè)timer
         liTags[i].onmouseover = function () {
          startMove(this,400);
         }
         liTags[i].onmouseout = function () {
          startMove(this,200);
         }
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var objWidth = parseInt(getStyle(obj,'width'));//因?yàn)槭峭ㄟ^[]調(diào)用屬性，所以width必須加單引號(hào)
        // var iSpeed = (iTarget -obj.offsetWidth)/10;
        // 因?yàn)閛bjWidth存放的就是當(dāng)前對(duì)象的寬，所以直接寫objWidth而不是obj.objWidth
        var iSpeed = (iTarget -objWidth)/10;
          iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(objWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = objWidth+iSpeed+'px';
        }
      },30);
    }
</script>

如果此時(shí)需求有變化，讓第2個(gè)li鼠標(biāo)移入，高度變化，第三個(gè)li鼠標(biāo)依然邊框，第四個(gè)li鼠標(biāo)移入背景變化。一種辦法就是復(fù)制幾分startMove函數(shù)，分別把之前width變化改成height，borderWidht，和opacity透明度變化；但是這樣顯然浪費(fèi)，可以把他們合并成一個(gè)函數(shù)，把變化的屬性作為參數(shù)傳進(jìn)去就好了.

1. function startMove(obj,attr,iTarget) 函數(shù)里新增attr參數(shù)
2. 調(diào)用參數(shù)的方式：由obj.style.屬性名 變成 obj.style[屬性名]
3. 需要分別為每個(gè)li添加事件

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
        liTags[i].timer = null;// 給每個(gè)li都添加一個(gè)timer
        liTags[0].onmouseover = function () {
          startMove(this,'width',400);
        }
        liTags[0].onmouseout = function () {
          startMove(this,'width',200);
        }
        liTags[1].onmouseover = function () {
          startMove(this,'height',100);
        }
        liTags[1].onmouseout = function () {
          startMove(this,'height',50);
        }
        liTags[2].onmouseover = function () {
          startMove(this,'borderWidth',10);
        }
        liTags[2].onmouseout = function () {
          startMove(this,'borderWidth',2);
        }
        liTags[3].onmouseover = function () {
          startMove(this,'padding',10);
        }
        liTags[3].onmouseout = function () {
          startMove(this,'padding',0);
        }
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,attr,iTarget) {//attr：把變化的屬性最為參數(shù)傳入
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var objAttr = parseInt(getStyle(obj,attr));
        var iSpeed = (iTarget -objAttr)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(objAttr == iTarget){
          clearInterval(obj.timer);
        }else{
          //obj.style.width = objWidth+iSpeed+'px';
          obj.style[attr] = objAttr+iSpeed+'px';// 需要又.屬性名的形式改成[]
        }
      },30);
    }
</script>

運(yùn)行一下發(fā)現(xiàn)，改變寬，高，border都妥妥的，但是最后一個(gè)改變“透明度”沒反應(yīng)，是什么問題那？？

首先opacity的值0.3一個(gè)小數(shù)，parseInt(getStyle(obj,attr)之后便變成0，還有最大的一個(gè)問題就是最后屬性值設(shè)置的時(shí)候：obj.style[attr] =  objAttr+iSpeed+'px'; 顯然opacity并沒有px這個(gè)單位，所以需要對(duì)運(yùn)動(dòng)框架做進(jìn)一步處理

需要判斷一下，當(dāng)接受的參數(shù)是“透明度”的時(shí)候，需要單獨(dú)處理一下，把上面出問題的兩個(gè)地方做一下處理

var objAttr = 0;
if(attr == "opacity"){
   // 由于計(jì)算機(jī)對(duì) 小數(shù)的處理有問題，這里用Math.round處理一下
   // objAttr = parseFloat(getStyle(obj,attr)*100);
  //objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);
  objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
   objAttr = parseInt(getStyle(obj,attr));
}

如果不做處理直接 objAttr = parseFloat(getStyle(obj,attr)*100); 由于計(jì)算機(jī)不能很精確的處理小數(shù)，會(huì)導(dǎo)致一些問題

用parseInt這種方法：objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以處理小數(shù)，但是經(jīng)過測試在鼠標(biāo)移出的時(shí)候，與原來狀態(tài)有一點(diǎn)偏差

可以看出，當(dāng)鼠標(biāo)移出去的時(shí)候，opacity應(yīng)該回到1，可結(jié)果卻是0.94 ；所以個(gè)人推薦用Math.round四舍五入函數(shù)來處理這里的小數(shù)問題

做一下判斷，下面也同樣做判斷

if(attr == "opacity"){
  obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
  obj.style.opacity = (objAttr+iSpeed)/100;
}else{
  //obj.style.width = objWidth+iSpeed+'px';
  obj.style[attr] = objAttr+iSpeed+'px';// 需要又.屬性名的形式改成[]
}

完整代碼：

HTML部分

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

css部分：

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      border: 2px solid #c00;
      background: lightblue;
    }
</style>

js部分

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
        liTags[i].timer = null;// 給每個(gè)li都添加一個(gè)timer
        liTags[0].onmouseover = function () {
          startMove(this,'width',400);
        }
        liTags[0].onmouseout = function () {
          startMove(this,'width',200);
        }
        liTags[1].onmouseover = function () {
          startMove(this,'height',100);
        }
        liTags[1].onmouseout = function () {
          startMove(this,'height',50);
        }
        liTags[2].onmouseover = function () {
          startMove(this,'borderWidth',10);
        }
        liTags[2].onmouseout = function () {
          startMove(this,'borderWidth',2);
        }
        liTags[3].onmouseover = function () {
          startMove(this,'opacity',30);
        }
        liTags[3].onmouseout = function () {
          startMove(this,'opacity',100);
        }
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,attr,iTarget) {//attr：把變化的屬性最為參數(shù)傳入
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var objAttr = 0;
        if(attr == "opacity"){
          // 由于計(jì)算機(jī)對(duì) 小數(shù)的處理有問題，這里用parseFloat轉(zhuǎn)一下
          objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
        }else{
           objAttr = parseInt(getStyle(obj,attr));
        }
        var iSpeed = (iTarget -objAttr)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(objAttr == iTarget){
          clearInterval(obj.timer);
        }else{
          if(attr == "opacity"){
            obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
            obj.style.opacity = (objAttr+iSpeed)/100;
          }else{
            //obj.style.width = objWidth+iSpeed+'px';
            obj.style[attr] = objAttr+iSpeed+'px';
          }
        }
      },30);
    }
</script>

最后結(jié)果演示：

 

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《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)論