以下代码就不详细解析了，在我之前的多个运动效果中已经解析好多次了，重复的地方这里就不说明了，有兴趣的童鞋可以去看看之前的文章《原生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. grads 用arcgis分析站点的网格

    第一步,用工具创建渔网(要素类) 第二步:将站点excel导入,生成点要素 站点excle,点击上面节点导出数据即可. 第三步,叠加在一起,找网格编号.

  2. centos环境源码安装postgresql9.4

    源码安装简要步骤 下载PostgreSQL 源码包  下载根目录地址:http://ftp.postgresql.org/  本人选择的是当前最新版本v9.4.1:http://ftp.postgre ...

  3. excel取消自动超链接的方法：还原和自动更正取消自动超链接

    默认设置下,我们在excel表格中输入网址,一般excel都会自动将我们输入的网址自动更正为超链接.当单击该网址,就会打开相应的网页. 如果我们不想要自动添加超链接,请看下面的excel取消自动超链接 ...

  4. C#小知识点

    1.显示|隐示转换: public static explicit operator ImplicitClass(ExplicitClass explicitClass) //implicit { I ...

  5. ECshop中defined('IN_ECS')的实现原理

    在PHP中经常看到如下代码   if (!defined('IN_ECS'))   {       die('Hacking attempt');   }   实现的原因以及原理如下:     ecs ...

  6. java JPEGImageEncoder；图像处理

    在Eclipse中处理图片,需要引入两个包: import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JP ...

  7. HDU 1060 Leftmost Digit

    基本思路:(参考大神和加自己的思考) 考虑到此题需要输入这么大的数a,并且还的求aa,求出来会更大,更多位.当时考虑用大数方法求(数组实现),结果实现不行.看网上大神采用对数法,巧妙避开处理这么大的数 ...

  8. GPS定位原理

    多分钟吧(有人认为美国对其本土覆盖的GPS信号实行不同码率因此纯GPS定位也会很快,谁有美国朋友不妨让他拔卡试试)!因为美版机型其GPS模块的数据处理软件部分与欧版机型是不同的,欧版机型的数据处理软件 ...

  9. Get与Post的一些总结

    1.GET请求的数据会附在URL之后,POST把提交的数据则放置在是HTTP包的包体中. 2."GET方式提交的数据最多只能是1024字节这句话是错误的 URL不存在参数上限的问题,HTTP ...

  10. log4j---------学习总结(一)

    一.log4j框架 log4j可靠的,快速的,可扩展的(灵活的)日志框架 log4j具有高可配置性,可以通过外部配置文件来控制 log4j可以根据日志不同级别来过滤日志, log4j可以将日志记录直接 ...