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

    举例一: [xiluhua@vm-xiluhua][~/shell_script]$ cat forDemo1.sh #======================================== ...

  2. centos6.5-64bit安装htop

    首先启用 EPEL Repository: yum -y install epel-release 启用 EPEL Repository 後, 可以用 yum 直接安裝 Htop: yum -y in ...

  3. Spring面试问题

    什么是Spring框架?Spring框架有哪些主要模块? 使用Spring框架有什么好处? 什么是控制反转(IOC)?什么是依赖注入? 请解释下Spring中的IOC? BeanFactory和App ...

  4. destoon 深度整合discuz x2 UC 之免邮箱二次验证

    destoon中member/my.php,信息发布入口处判断是否已在dx中做了验证,如果已经验证,则不再提示验证,否则其中dt的验证页面. 在home.php.php. group.php. for ...

  5. Houdini Krakatoa Render Plugin

    HDK真实个混蛋,都懒得写个解释.凭着函数英文意思猜测.. plugin sample video: 在极其残忍的开发环境,"Particle Voxel Render" 产生了( ...

  6. java GUI画满天星

    import java.awt.Color; import java.awt.Graphics; import java.awt.Image; import javax.swing.ImageIcon ...

  7. java UUID

    UUID是Universally Unique Identifier的缩写,它是在一定的范围内(从特定的名字空间到全球)唯一的机器生成的标识符.UUID具有以下涵义: 经由一定的算法机器生成 为了保证 ...

  8. 在Oracle 中使用CONNECT BY PRIOR START WITH 语句详解

    语法:connect by 是结构化查询中用到的,其基本语法如下: start with,connect by主要目的:从表中取出树状数据.可以假想成表中存成的各条数据是分别是树中的一个结点. sel ...

  9. rtc关机闹钟7 jni层 com_android_server_AlarmManagerService

    frameworks/base/services/core/jni/com_android_server_AlarmManagerService.cpp int AlarmImplAlarmDrive ...

  10. 测试-关于Unity获取子层级内容的几种接口(Transform FindChild, Component GetComponentInChildren,...)

    测试常用的层级内组件查找接口,但一些需求还是需要扩展 比如按照名称批量查找节点,查找接口对象等 1.Transform - Transform Find(string name) 可以直接根据名称搜索 ...