首页 > 代码库 > js运动框架完成块的宽高透明度及颜色的渐变

js运动框架完成块的宽高透明度及颜色的渐变

2024-08-29 11:41:02   220人阅读

　　了解了运动框架完成块元素的宽高和透明度的变化的原理，我想着写一个颜色的变化来练习一下，不想写了很长时间才写出来，跟各位分享一下。

　　颜色的变化是通过三元素渐变的方式完成的，通过构造json，使当前的颜色与目标颜色进行对比，实现渐变的过程。

代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         div{
  8             display: inline-block;
  9             width: 50px;
 10             height: 50px;
 11             background: rgb(220,254,235);
 12             position: absolute;
 13             top: 100px;
 14         }
 15     </style>
 16 </head>
 17 <body>
 18 <div style="left: 100px"></div>
 19 </body>
 20 </html>
 21 <script>
 22     //获取元素样式，并设置
 23     function getStyle(obj,attr,value){
 24         if(arguments.length == 2){
 25             if(obj.currentStyle){
 26                 return obj.currentStyle[attr];
 27             }else{
 28                 return getComputedStyle(obj,false)[attr];
 29             }
 30         }else if(arguments.length == 3){
 31             obj.style[attr] = value;
 32         }
 33     }
 38     //运动框架  透明度 + 颜色 + 基本
 39     function move(obj,json,fn){
 40         clearInterval(obj.timer);
 41 
 42         obj.timer = setInterval(function(){
 43             var bStop = true;
 44             for(var name in json){
 45                 var iCur = 0;
 46 
 47                 if(name == "opacity"){         //若name为opacity时
 48                     iCur = parseInt(parseFloat(getStyle(obj,name))*100);
 49                     var iSpeed = (json[name]*100 - iCur)/10;
 50                     iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 51                     obj.style.opacity = (iCur + iSpeed)/100;
 52                     obj.style.filter = "alpha(opacity:" + iCur + iSpeed +")";
 53                 }else if(name == "background"){        //若name为background时（该部分代码完全自己所想，不代表标准模式，望有更好意见的访客能给出更好的意见）
 54                     //获取颜色的三元素 str = rgb(r,g,b)
 55                     function getColor(str){             //获取到背景色的三元素，进行拆分
 56                         var s = str.substring(4,str.length-1);
 57                         var arr = s.split(",");
 58                         var r = parseInt(arr[0]);
 59                         var g = parseInt(arr[1]);
 60                         var b = parseInt(arr[2]);
 61                         return {
 62                             red : r,
 63                             green : g,
 64                             blue : b
 65                         };
 66                     }
 67 
 68                     iCur = getStyle(obj,"background-color");  //当前背景色
 69                     var newStr = json[name];
 70                     var arr = [];    //定义一个数组，用来存放新的三元素的值
 71                     var newJson = {};  //将设置的背景色写成一个json，并与getColor相对应
 72                     newJson.red = getColor(newStr).red;
 73                     newJson.green = getColor(newStr).green;
 74                     newJson.blue = getColor(newStr).blue;
 75 
 76                     for(var name in newJson){    //newJson中循环，得到最新的三元素
 77                         var cur = parseInt(getColor(iCur)[name]);
 78                         var iSpeed = (newJson[name] - cur)/10;
 79                         iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 80                         var tmp = cur + iSpeed;
 81                         arr.push(tmp);
 82                     }
 83                     obj.style.background = "rgb(" + arr[0] + ","+ arr[1] + ","+ arr[2] + ")";
 84                 }else{     //name为width height
 85                     iCur = parseInt(getStyle(obj,name));
 86                     var iSpeed = (json[name] - iCur)/10;
 87                     iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 88                     obj.style[name] = iCur + iSpeed + "px";
 89                 }
 90                 if(iCur != json[name]) bStop = false;
 91             }
 92             if(bStop){
 93                 clearInterval(obj.timer);
 94                 if(fn) fn();
 95             }
 96         },30)
 97     }
 98 
 99     window.onload = function(){
100         var oDiv = document.getElementsByTagName("div")[0];
101 
102         oDiv.onmouseover = function(){
103             move(oDiv,{width:200,height:300,opacity:0.5,background:"rgb("+234+","+" "+ 124+","+" "+ 211+")"});
104         }
105     }
106 </script>

 

js运动框架完成块的宽高透明度及颜色的渐变


联系
我们