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

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. SoapUI API + Groovy API + Difference with Java

    用soapUI进行webservice测试过程中,必不可少的要用到soapUI封装的代码.我们一起学习吧:) SoapUI 5.1.2 API:http://www.soapui.org/apidoc ...

  2. JVM-类加载机制

    虚拟机类加载机制  虚拟机把描述的类的数据从class文件加载到内存后,并对数据进行校验,转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制.  类加载的时机 类被 ...

  3. Annotation注解（有源代码）

    注解(annotation)概述: ·从JDK5.0 开始,java增加了对元数据(MetaData)的支持,也就是Annotation(注解) ·Annotation其实就是代码里的特殊标记,这些标 ...

  4. Ubuntu16.04 操作

    1. 无法获得锁 /var/lib/dpkg/lock - open (11: 资源临时不可用) sudo rm /var/cache/apt/archives/locksudo rm /var/li ...

  5. 简便删除已经存在的oracle数据库用户UPAY3LINGXI_YS

    简便删除已经存在的oracle数据库用户UPAY3LINGXI_YS:1.Toad工具用oracle最大权限用户登录system2.查看正在使用UPAY3LINGXI_YS的进程select * fr ...

  6. Android 中pid与uid的作用与区别

    PID:为Process Identifier, PID就是各进程的身份标识. 程序一运行系统就会自动分配给进程一个独一无二的PID.进程中止后PID被系统回收,可能会被继续分配给新运行的程序,但是在 ...

  7. js 开启video全屏模式

    方法一: function launchFullScreen() { var element = document.documentElement; if(element.requestFullScr ...

  8. selinium的ruby版在windows8下安装

    1.安装ruby,当然windows下是最简单的装一个rubyinstaller,官网有.一步到位 2.因为selinium官网被墙,所以改成淘宝的一个资源库 gem sources --remove ...

  9. C#的输入、输出与运算符、数据类型

    (1)Visual Studio.NET起始页 启动Visual Studio.NET后,首先看到一个如下图所示的起始页.在起始页可以打开已有的项目或建立新的项目. (2)新建Visual1C# .n ...

  10. hiho一下121周 后缀数组二·重复旋律2

    后缀数组二·重复旋律2 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成的数列.小Hi ...