以下代码就不详细解析了，在我之前的多个运动效果中已经解析好多次了，重复的地方这里就不说明了，有兴趣的童鞋可以去看看之前的文章《原生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. java中的单例设计模式

    单例模式有一下特点: 1.单例类只能有一个实例. 2.单例类必须自己自己创建自己的唯一实例. 3.单例类必须给所有其他对象提供这一实例. 单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供 ...

  2. MySQL之对数据库库表的字符集的更改

    数据字符集修改步骤: 对于已有的数据库想修改字符集不能直接通过 "alter database character set *"或 "alter table tablen ...

  3. 怎样用PHP制作验证码呢？

    生成验证码无非就那么几个步骤,首先是获取一个随机字符串,然后创建一个布画,将生成的字符串写到布画上,我们还可以在布画上画线画雪花,现在帖一段生成验证码的代码. 源代码: <?phpsession ...

  4. PHP stat() 函数 返回关于文件的信息。

    定义和用法 stat() 函数返回关于文件的信息. 语法 fstat(file) 参数 描述 file 必需.规定要检查的文件. 说明 获取由 file 指定的文件的统计信息.如果 file 是符号连 ...

  5. ecshop底部版权修改和组成分析

    我们在ecshop二次开发和ecshop使用过程中,往往需要对ecshop底部进行处理和修改．比如ecshop底部版权问题,ecshop底部程序结构问题．也有很多朋友咨询ecshop底部的一些修改问题 ...

  6. C#中的异步和同步

    同步 同步(英语:Synchronization [ˌsɪŋkrənaɪ'zeɪʃn]),指对在一个系统中所发生的事件(event)之间进行协调,在时间上出现一致性与统一化的现象.说白了就是多个任务一 ...

  7. js监控窗口高度和宽度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  8. PHP中的XML解析的5种方法

    [前言]不管是桌面软件开发,还是WEB应用,XML无处不在!然而在平时的工作中,仅仅是使用一些已经封装好的类对XML对于处理,包括生成,解析等.假期有空,于是将PHP中的几种XML解析方法总结如下: ...

  9. Spark系列之二——一个高效的分布式计算系统

    1.什么是Spark? Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用的并行计算框架,Spark基于map reduce算法实现的分布式计算,拥有H ...

  10. Python 2.7.9 Demo - isinstance

    #coding=utf-8 #!/usr/bin/python a = 'abc'; print isinstance(a, str);