介绍了那么多运动，這次一套代码实现所有运动

1.html代码和css代码，只是定义一个div

 <style>

     div{

         width:200px;

         height:200px;

         margin:20px;

         float:left;

         background:yellow;

         border:10px solid black;

         filter:alpha(opacity:30);

         opacity:0.3;

     }

 </style>

 <body>

 <div id="div1">

 </div>

 </body>

2.js代码部分

 <script>

     window.onload=function()

     {

         var div=document.getElementById('div1');

         div.onmouseover=function()

         {

             startMove(this,'height',1000);

         }

         div.onmouseout=function()

         {

             startMove(this,'height',50);

         }

     };

     function getStyle(obj,name)    //兼容性问题，修改非行间的css

     {

         if (obj.currentStyle)//chrome和firefox

         {

               return obj.currentStyle[name];

         }

         else//ie浏览器

         {

             return getComputedStyle(obj,false)[name];

         }

     }

     function startMove(obj,attr,iTarget)

     {

         clearInterval(obj.timer);

         obj.timer=setInterval(function()

             {

                 var cur=0;

                 if (attr=="opacity")   //判断传入的参数是不是透明度

                 {

                     cur=parseFloat(getStyle(obj,attr))*100;  //强制转换为浮点数

                 }

                 else   //如果不是透明度，执行這句

                 {

                     cur=parseInt(getStyle(obj, attr));  //返回传入要修改的属性的值

                 }

                 var speed=(iTarget-cur)/100 ;  //设置速度

                 speed=speed>0?Math.ceil(speed):Math.floor(speed);  //取上下限

                 if(cur==iTarget)  //当等于要实现的值时停止

                 {

                     clearInterval(obj.timer);

                 }

                 else

                 {

                     if (attr=='opacity')  //如果是透明度，兼容性。写两句

                     {

                         obj.style.filter='alpha(opcity:'+(cur+speed)+')';  //chrome和firefox

                         obj.style.opacity=(cur+speed)+'px';  //ie

                     }

                     else   //要修改的是其他，直接修改他的值

                     {

                         obj.style[attr]=cur+speed+'px';

                     }

                 }

             },

             30)

     }

 </script>

js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽的更多相关文章

  1. js实现图片的淡入淡出

    思想: 其实是运动的一种,就是当鼠标移入div中时,将div的透明度变大, 当鼠标移动出来的时候透明度变回原来. 你可以尝试写一下,不会再看看代码 <style> #div1{ width ...

  2. （42）JS运动之多物体框架--多个div变宽

    假设仅仅为div加入一个定时器的话.在多个div变宽的时候会发生故障.可是假设为每一个div加入一个定时器.那么就能够实现多个物体变宽. 注意:在多物体运动的情况下,全部东西不能共用.offsetXX ...

  3. 淡入淡出效果模板 js

    html文件中: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

  4. JS实现图片的淡入和淡出的两种方法，如有不足，还请前辈多多指导^-^~

    今天下午练习了下这个图片的淡入淡出小demo,如有不足,还请前辈多多指导^-^~ 总结如下: 第一种方法: 个人觉得第一种方法比较好,同时兼容IE8以下浏览器,但是如下代码中,不知可不可以将timer ...

  5. JS弹出窗口代码大全(详细整理)

    1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; < ...

  6. Color.js增强你对颜色的控制

    往逝之因 不要低头,皇冠会掉...  可你又没有皇冠 Color.js 增强你对颜色的控制 阅读目录 轻松管理颜色--color.js库 使用color.js Accessor Methods 你该知 ...

  7. 一套代码小程序&Web&Native运行的探索07——mpvue简单调研

    前言 接上文:[一套代码小程序&Native&Web阶段总结篇]可以这样阅读Vue源码 最近工作比较忙,加之上个月生了小孩,小情人是各种折腾他爸妈,我们可以使用的独立时间片不多,虽然这 ...

  8. 【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码

    前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...

  9. 一套代码小程序&Web&Native运行的探索05——snabbdom

    接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...

随机推荐

  1. ubuntu科学计算包blas和lapack的安装

    该包是高性能的线性代数计算库,两个包一般是相互依赖,因此选择同时介绍其安装: 官方发布如今是lacpack-3.5.0.tgz,获取方法是网址.但打不开,ubuntu一般用 wget http://w ...

  2. jQueryMobile控件之展开与合并

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JAVA ，Map接口 ，迭代器Iterator

    1.    Map 接口概述 java.util.Map 接口描述了映射结构, Map 接口允许以键集.值集合或键 - 值映射关系集的形式查看某个映射的内容. Java 自带了各种 Map 类. 这些 ...

  4. python分割字符串split,filter函数用法

    现有字符串,需要取出用空格分隔的第一段,操作如下 >>> product_model = ‘WS-C2960G-24TC-L – Fixed Module 0′>>> ...

  5. C++异常处理的问题

    一般在C语言中,是通过返回值或者设置errno的方式来标识错误的 但在C++里面,构造函数是没有返回值的,于是发明了异常的方式:为了正确的向使用者表明 异常抛出的原因,你必须弄清楚异常抛出的原因(比如 ...

  6. 用VS2010+Qt4.6.4编译QtAV

    http://blog.csdn.net/trustguan/article/details/45623891 如果在链接的过程中,出现以上错误: 1>MSVCRTD.lib(MSVCR100D ...

  7. 在线生成CSS样式和兼容的字体格式

    http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.

  8. JDK各版本新特性！

    1.JDK1.5 新特性 1.自动装箱与拆箱:自动装箱的过程:每当需要一种类型的对象时,这种基本类型就自动地封装到与它相同类型的包装中.自动拆箱的过程:每当需要一个值时,被装箱对象中的值就被自动地提取 ...

  9. js Math 对象的方法

    Math对象与JavaScript其他对象不同,因为用户不能生成所使用对象的副本,相反脚本汇集了简单Math对象的属性和方法.Math对象实际上存在于每个窗口和框架中,但是对脚本没有影响,程序员把这种 ...

  10. HDU 1548 A strange lift （bfs / 最短路）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1548 A strange lift Time Limit: 2000/1000 MS (Java/Ot ...