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

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. c3p0的log4j配置

    com.mchange.v2.log.log4j.Log4jMLog=info,console,c3p0fileslog4j.appender.c3p0files=org.apache.log4j.D ...

  2. Python开发入门与实战9-基于vs的集成开发环境

    9. 基于visual studio的Python的集成开发环境 上一章我们描述了如何安装使用Java的集成开发环境Eclipse IDE,本章我们来说明另一种集成开发环境,也是笔者多年的开发习惯使用 ...

  3. Objective-C学习笔记－第一天(1)

    .h头文件,用于声明一些公开的属性.方法.头文件一般不会放太多的东西,没必要暴露太多接口,私有和封装. .m主文件,用于实现.h文件中的方法,以及一些其它的方法. -(返回值)方法名参数1名称:(参数 ...

  4. 如何编译spring源码，并导入到eclipse中

    wsc@WSC-PC /d/wsc/study-spring-source$ git clone https://github.com/spring-projects/spring-framework ...

  5. Libgdx 开发指南——目录

    本系列文档选译自libgdx github项目 wiki : https://github.com/libgdx/libgdx/wiki 由于关于Libgdx的中文文档非常稀缺,因此在这里对官方Wik ...

  6. 数据库最大连接池max pool size

    本文导读:Max Pool Size如果未设置则默认为100,理论最大值为32767.最大连接数是连接池能申请的最大连接数,如果数据库连接请求超过此数,后面的数据库连接请求将被加入到等待队列中,这会影 ...

  7. IOS 在控制器间跳转实现过渡动画

    已经掌握了CALayer下的CATransition动画在同一个控制器下实现,但是在不同控制器间跳转又该如何实现呢? MyViewController *myVC = [[MyViewControll ...

  8. kinnect相关

    1. kinnect的现状. http://tech.qq.com/a/20150909/046760.htm 2. kinnect的相关工作 http://baike.baidu.com/link? ...

  9. R正则表达式的问题

    今天在处理R的正则表达式的时候发现,R的正则式中的转义字符和linux.python等的还不一样. Linux是使用"\",而R中则使用"[]"! # 我想要将 ...

  10. VoxelGrid体素滤波器对点云进行下采样

    使用体素化网格方法实现下采样,即减少点的数量,减少点云数据,并同时保持点云的形状特征,在提高配准.曲面重建.形状识别等算法速度中非常实用. PCL实现的VoxelGrid类通过输入的点云数据创建一个三 ...