以下代码就不详细解析了，在我之前的多个运动效果中已经解析好多次了，重复的地方这里就不说明了，有兴趣的童鞋可以去看看之前的文章《原生javascript的小特效》

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css"> 

body,*{margin: 0;padding: 0;}

li{width: 300px;height:100px;background: yellow;margin-top: 10px;filter: alpha(opacity:30);opacity: 0.3}

</style>

<script type="text/javascript">

window.onload=function(){

  var aLi=document.getElementsByTagName("li")[0];

  aLi.onmouseover=function(){

     onOut(aLi,500,'width',function(){ //我们把一个匿名函数作为参数传进，函数同样执行 onOut()函数

       onOut(aLi,300,'height');

     });

  }

  aLi.onmouseout=function(){

     onOut(aLi,100,'height',function(){

       onOut(aLi,300,'width');

     });

  }

}

function onOut(that,tag,tagattr,fun){

  clearInterval(that.timer);

   

  that.timer=setInterval(function(){

    var speed;

    var attr;

    if(tagattr=='opacity'){

      attr=Math.round(parseFloat(getAttr(that,tagattr))); 

      //计算机在处理小数点的时候不是很准确的，一般这样我们都四舍五入一下

      }else{

        attr=parseInt(getAttr(that,tagattr));

      }

      if(tagattr=='opacity'){

       speed=(tag-attr);

     }

   else{

     speed=(tag-attr)/20;

   }

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

   if(attr==tag){

    clearInterval(that.timer);

    if(fun){  //判断是否有fun参数传进来

      fun();// 链式运动中我们在停止上一次运动的时候，来个判断，是否有fun这个函数，有的话 就执行

    } 

    }else{

      if(tagattr=='opacity'){

       that.style.filter="alpha(opacity:'+speed+')";

       that.style.opacity=speed/100;

       }else{

        that.style[tagattr]=attr+speed+"px";

      }

    }

    },20)

}

function getAttr(obj,attr){

  var style;

  if(obj.currentStyle){

    style=obj.currentStyle[attr];

    }else{

      style=getComputedStyle(obj,false)[attr];

    }

    return style;

  }

  </script>

  </head>

  <body>

  <ul>

  <li></li>

 

  </ul>

  </body>

  </html>

javascript学习-原生javascript的小特效（原生javascript实现链式运动）的更多相关文章

  1. 原生JavaScript运动功能系列（四）：多物体多值链式运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...

  2. HTML+JavaScript实现链式运动特效

    在学习js的过程中,发现这家伙做特效真是不错,尽管说眼下水平还不够,只是也能写点简单的效果. 今天分享一个简单的运动框架.然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中.主 ...

  3. javascript链式运动框架案例

    javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...

  4. Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  5. <深入理解JavaScript>学习笔记(5)_强大的原型和原型链

    前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. (prototypal :原型.学好英语还是很重要的) 虽然这经常被当作是 JavaScript 的缺点 ...

  6. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  7. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  8. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  9. JavaScript学习笔记 - 进阶篇（6）- JavaScript内置对象

    什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...

随机推荐

  1. 浅析String、StringBuffer、StringBuilder的区别以及性能区别

    前奏: 比较三者之间的区别在与区别他们做相同的事情的时候的区别,那就是在我们常见的拼接字符串的时候,StringBuffer.StringBuilder调用的是appende()方法,而String很 ...

  2. MAVEN修改localRepository不起作用

    MAVEN修改localRepository不起作用 环境:win10 改用其他盘符都可以,唯独C:\Users\Administrator\.m2\repository不起作用,应该是win10权限 ...

  3. TCP/IP协议 HTTP协议

    TCP/IP协议 OSI传统的7层参考模型:物理层,数据链路层,网络层,传输层,话路层,表示层和应用层.而TCP/IP协议并不完全符合这7层参考模型,它只采用了其中的应用层,传输层,网络层和数据链路层 ...

  4. webservice cxf error:java.lang.IllegalArgumentException: Argument(s) "type" can't be null.

    客户端请求DTO和服务器端的DTO定义不一样,客户端必须定义@XmlAccessorType和@XmlType,如: @XmlAccessorType(XmlAccessType.FIELD) @Xm ...

  5. 启动hadoop报192.168.1.151: Address 192.168.1.151 maps to node1, but this does not map back to the address - POSSIBLE BREAK-IN ATTEMPT!

    使用root用户启动hadoop的时候报错: [root@node1 ~]# su - hadoop -c start-all.sh starting namenode, logging to /ap ...

  6. .Net额外小工具

    http://blog.csdn.net/zhumi/article/details/49076 用于编写单元测试的 NUnit用于创建代码文档资料的 NDoc用于生成解决方案的 NAnt用于生成代码 ...

  7. hdwiki 编码规范

    编码规范         命名规范 1.1.主要的目录 control 里面是控制类 ,前台命名为something.php,则后台对应的是admin_+前台名称,名称应选有意义的英文单词,例如 前台 ...

  8. mysql 段错误 (core dumped)

    一直使用好好的mysql命令,突然今天抽风,无论使用任何mysql选项都报“段错误 (core dumped)”,以为是mysqld程序出问题了,所以我尝试重启,因为我的环境上是多实例,用了mysql ...

  9. 理解 Android Build 系统

    在配置了以上的文件之后,便可以编译出我们新添加的设备的系统镜像了. 首先,调用“source build/envsetup.sh”该命令的输出中会看到 Build 系统已经引入了刚刚添加的 vendo ...

  10. Mysql-学习笔记（==》连接查询_高级查询五）

    CREATE TABLE t( tid INT UNSIGNED NOT NULL AUTO_INCREMENT, tname VARCHAR(30), PRIMARY KEY (tid))ENGIN ...