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

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

代码如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         div{

             display: inline-block;

             width: 50px;

             height: 50px;

             background: rgb(220,254,235);

             position: absolute;

             top: 100px;

         }

     </style>

 </head>

 <body>

 <div style="left: 100px"></div>

 </body>

 </html>

 <script>

     //获取元素样式，并设置

     function getStyle(obj,attr,value){

         if(arguments.length == 2){

             if(obj.currentStyle){

                 return obj.currentStyle[attr];

             }else{

                 return getComputedStyle(obj,false)[attr];

             }

         }else if(arguments.length == 3){

             obj.style[attr] = value;

         }

     }

     //运动框架  透明度 + 颜色 + 基本

     function move(obj,json,fn){

         clearInterval(obj.timer);

         obj.timer = setInterval(function(){

             var bStop = true;

             for(var name in json){

                 var iCur = 0;

                 if(name == "opacity"){         //若name为opacity时

                     iCur = parseInt(parseFloat(getStyle(obj,name))*100);

                     var iSpeed = (json[name]*100 - iCur)/10;

                     iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                     obj.style.opacity = (iCur + iSpeed)/100;

                     obj.style.filter = "alpha(opacity:" + iCur + iSpeed +")";

                 }else if(name == "background"){        //若name为background时（该部分代码完全自己所想，不代表标准模式，望有更好意见的访客能给出更好的意见）

                     //获取颜色的三元素 str = rgb(r,g,b)

                     function getColor(str){             //获取到背景色的三元素，进行拆分

                         var s = str.substring(4,str.length-1);

                         var arr = s.split(",");

                         var r = parseInt(arr[0]);

                         var g = parseInt(arr[1]);

                         var b = parseInt(arr[2]);

                         return {

                             red : r,

                             green : g,

                             blue : b

                         };

                     }

                     iCur = getStyle(obj,"background-color");  //当前背景色

                     var newStr = json[name];

                     var arr = [];    //定义一个数组，用来存放新的三元素的值

                     var newJson = {};  //将设置的背景色写成一个json，并与getColor相对应

                     newJson.red = getColor(newStr).red;

                     newJson.green = getColor(newStr).green;

                     newJson.blue = getColor(newStr).blue;

                     for(var name in newJson){    //newJson中循环，得到最新的三元素

                         var cur = parseInt(getColor(iCur)[name]);

                         var iSpeed = (newJson[name] - cur)/10;

                         iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                         var tmp = cur + iSpeed;

                         arr.push(tmp);

                     }

                     obj.style.background = "rgb(" + arr[0] + ","+ arr[1] + ","+ arr[2] + ")";

                 }else{     //name为width height

                     iCur = parseInt(getStyle(obj,name));

                     var iSpeed = (json[name] - iCur)/10;

                     iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                     obj.style[name] = iCur + iSpeed + "px";

                 }

                 if(iCur != json[name]) bStop = false;

             }

             if(bStop){

                 clearInterval(obj.timer);

                 if(fn) fn();

             }

         },30)

     }

     window.onload = function(){

         var oDiv = document.getElementsByTagName("div")[0];

         oDiv.onmouseover = function(){

             move(oDiv,{width:200,height:300,opacity:0.5,background:"rgb("+234+","+" "+ 124+","+" "+ 211+")"});

         }

     }

 </script>

js运动框架完成块的宽高透明度及颜色的渐变的更多相关文章

  1. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  2. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  3. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  4. js运动框架 step by step

    开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...

  5. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  6. js 运动框架及实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js运动框架之掉落的扑克牌（重心、弹起效果）

    玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...

  8. 完美的js运动框架

    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...

  9. js 运动框架-轻量级

    具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...

随机推荐

  1. [转] Jenkins实战演练之Windows系统节点管理

    [前提] 通过<Jenkins实战演练之Windows服务器快速搭建>(http://my.oschina.net/iware/blog /191818)和<Jenkins实战演练之 ...

  2. 在Unity中创建可远程加载的.unity3d包

    在一个Unity项目中,发布包本身不一定要包括所有的Asset(译为资产或组件),其它的部分可以单独发布为.unity3d,再由程序从本地/远程加载执行,这部分不在本文讨论范围.虽然Unity并没有直 ...

  3. (原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得

    jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...

  4. folly::AtomicHashmap源码分析(一)

    本文为原创,转载请注明:http://www.cnblogs.com/gistao/ Atomic的两点背景 看下这个场景,老张去厕所,发现门是锁着的,他就在门口等着里边人出来,此时小王也来了,他想了 ...

  5. Navicat premium工具常用快捷键

    Navicat premium是一款数据库管理工具,它可以以单一程式同时连线到MySQL.PostgreSQL. Oracle .SQL Server 及 SQLite 资料库,让管理不同类型的资料库 ...

  6. iOS开发 适配iOS10以及Xcode8

    iOS10的适配以及Xcode8使用上的一些注意点 一.证书管理 用Xcode8打开工程后,比较明显的就是下图了,这个是苹果的新特性,可以帮助我们自动管理证书.建议大家勾选这个Automaticall ...

  7. 自学 PHP，如何不走弯路？

    1.一本好书至关重要.如果这本书的知识非常深入,那么还是不要看了.对初学者来说只能是打击.因为很多东西都看不懂.一本知识较为浅显,并且说明非常详细,但是能让你上手的基础知识又非常完善的书籍就非常好.( ...

  8. ie7中ul不能嵌套div和li平级

    我要讲一个忧伤的故事,本以为清晰的层次结构,ul里不能嵌套div和li平级,不然会乱乱乱! 代码: <ul class="catshow">              ...

  9. git初学习体会

    github:项目版本控制器 git和传统的版本控制器相比,最大的一点是,界面简单,给与非线性开发模式的强有力的支持,完全分布式等. 对于完全分布式的实现,我的理解是这个样子的.这多少要涉及到一点它的 ...

  10. Unity3D入门

    Unity3D是一款应用广泛的3D游戏引擎,本文主要介绍unity3D的简单应用,安装过程略过. 在游戏的整个开发过程中,游戏界面设计占据非常重要的地位.因为游戏启动后,第一个映入眼帘的就是整个游戏U ...