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

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. python3登录极路由并读取宽带帐号帐号密码.py

    python3登录极路由并读取宽带帐号帐号密码,fiddler抓包分析过程略... 步骤:1.登录路由,提取stok. 2.用stok拼成url,post请求 3.解析json数据 代码: " ...

  3. linux命令：head

    1.命令介绍: head用来显示文件的开头的一部分. 2.命令格式: head [选项] 文件 3.命令参数: -q 隐藏文件名 -v 显示文件名 -c<字节> 显示字节数 -n<行 ...

  4. OD调试篇13

    今天的程序比较大,听说还是比较牛的程序,不过破解它的一个比较老的版本的.打开程序看看. 点击about   然后点enter registration code    输入name  以及密钥之后,会 ...

  5. LNMP服务器虚拟主机管理lnmp

    安装 系统需求: 需要2 GB硬盘剩余空间 安装步骤: 1.使用putty或类似的SSH工具登陆:登陆后运行:screen -S lnmp如果提示screen命令不存在可以执行:yum install ...

  6. IOS网络开发（一）

    1 简易的聊天工具 1.1 问题 Socket的英文原义是孔或者插座的意思,通常也称作套接字,用于描述IP地址和端口,是一个通信链的句柄,本案例使用第三方Socket编程框架AsyncSocket框架 ...

  7. C++学习笔记16：Linux系统编程基础1

    参数列表 Linux命令行规范 短参数:以单横开头,后跟单一字符,例如:ls -h 长参数:以双横开头,后跟字符串,例如:ls --help 程序访问参数列表的方法: 主函数的参数argc和argv ...

  8. springboot系列之-helloword入门

    一. What: Spring Boot是什么?以1.4.3.RELEASE为例,官方介绍为:http://docs.spring.io/spring-boot/docs/1.4.3.RELEASE/ ...

  9. Hadoop ecosystem notes Outline - TODO

    Motivation Sometimes I fell like giving up, then I remember I have a lot of motherfuckers to prove w ...

  10. tomcat切割日志的shell脚本

    #!/bin/bash cd /usr/tomcats/ d=`date +%F` m1=`date -d'1 month ago' +%F` ` do cd tomcat808"$i&qu ...