以下代码就不详细解析了，在我之前的多个运动效果中已经解析好多次了，重复的地方这里就不说明了，有兴趣的童鞋可以去看看之前的文章《原生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. mmap直接控制底层【转】

    转自:http://blog.csdn.net/xyyangkun/article/details/7830149 版权声明:本文为博主原创文章,未经博主允许不得转载. 这是在mini6410上测试成 ...

  2. peak num

    class Solution {public: int findPeakElement(vector<int>& nums) {    int i=0;    int n=nums ...

  3. JDK结构介绍

    dt.jar和tools.jar位于:{Java_Home}/lib/下, 而rt.jar位于:{Java_Home}/jre/lib/下, 其中: (1) rt.jar是JAVA基础类库,也就是你在 ...

  4. Linux中重定向命令行

    http://www.ahlinux.com/start/base/3170.html

  5. 高级工具gprof、gprof2dot.py、dot

    可以研究程序性能.函数调用堆栈等,而且能用图标查看. linux环境下 C++性能测试工具 gprof + kprof + gprof2dot - 阁子 - 博客园 gprof.gprof2dot.p ...

  6. Android中的图片压缩

    1.android中计算图片占用堆内存的kB大小跟图片本身的kB大小无关,而是根据图片的尺寸来计算的. 比如一张 480*320大小的图片占用的堆内存大小为: 480*320*4/1024=600kB ...

  7. 【转】Eclipse插件大全介绍及下载地址

    转载地址:http://developer.51cto.com/art/200906/127169.htm 尚未一一验证. eclipse插件大全介绍,以及下载地址 Eclipse及其插件下载网址大全 ...

  8. jquery的ajax向ashx传值，中文乱码问题

    从网上查找了很多资料: 有在配置文件里面加如下配置 <globalization responseEncoding="utf-8" requestEncoding=" ...

  9. ASP函数大全

    ASP函数大全 Array() FUNCTION: 返回一个数组 SYNTAX: Array(list) ARGUMENTS: 字符,数字均可 EXAMPLE: <% Dim myArray() ...

  10. EF 增删改查

    StudentEntities entities = new StudentEntities(); //初始化对象 Register register = new Register(); #regio ...