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

  for(var i=0;i<aLi.length;i++){

   aLi[i].timer;

   aLi[i].onmouseover=function(){

    onOut(this,100,'opacity');

  }

  aLi[i].onmouseout=function(){

    onOut(this,30,'opacity');

  }

}

}

function onOut(that,tag,tagattr){

  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);

    }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>

  <li></li>

  <li></li>

  </ul>

  </body>

  </html>

javascript学习-原生javascript的小特效（多个运动效果整理）的更多相关文章

  1. javascript学习-原生javascript的小特效（简单的运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个 ...

  2. javascript学习-原生javascript的小特效（改变透明度效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 ( 以下效果兼容IE5+ IE5-以下没有测试哦) 今天为大家演示的效果是一个div,鼠标经过的时候透明度为100%,鼠标移出的时 ...

  3. javascript学习-原生javascript的小特效（原生javascript实现链式运动）

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

  4. javascript学习-原生javascript的小特效（多物体运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul>       <li> ...

  5. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  6. Javascript学习2 - Javascript中的表达式和运算符

    原文:Javascript学习2 - Javascript中的表达式和运算符 Javascript中的运算符与C/C++中的运算符相似,但有几处不同的地方,相对于C/C++,也增加了几个不同的运算符, ...

  7. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...

  8. javascript学习(二)javascript常见问题总结

    在js使用过程中,经常会碰到一些问题,本人利用闲暇时间整理了一些常见问题的解决方法,贴出来和大家分享,有需要的朋友可以参考下 1.JS中方法和变量都是区分大小写的  2.单引号.双引号在JS中没有特殊 ...

  9. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

随机推荐

  1. NLog

    C# 使用NLog记录日志 C#第三方日志库Nlog NLog类库使用探索——详解配置 使用Nlog记录日志到数据库 NLog文章系列——系列文章目录以及简要介绍 NLog日志框架简写用法(write ...

  2. MySQL 获得当前日期时间 函数

    获得当前日期+时间(date + time)函数:now() mysql> select now(); +---------------------+ | now() | +---------- ...

  3. POJ 3903：Stock Exchange（裸LIS + 二分优化）

    http://poj.org/problem?id=3903 Stock Exchange Time Limit: 1000MS   Memory Limit: 65536K Total Submis ...

  4. 解决php与IIs的冲突

    ISS与apache 服务器的默认端口号为 :80: 在浏览时,无法访问到. 可以将 apache的端口 改变即可: Apache安装好后,在其安装目录下的conf文件夹内会有httpd.conf这样 ...

  5. js认清this的第一步

    学习 this 的第一步是明白 this 既不指向函数自身也不指向函数的词法作用域, 你也许被这样的解释误导过, 但其实它们都是错误的.this 实际上是在函数被调用时发生的绑定, 它指向什么完全取决 ...

  6. C#的OpenFileDialog和SaveFileDialog的常见用法（转）

    OpenFileDialog openFileDialog1 = new OpenFileDialog();            openFileDialog1.InitialDirectory = ...

  7. c#之线程随机

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. asp.net 父窗体获取子窗体的返回值，可用来对父窗体局部更新

    今天在项目上遇到了这个问题,其实只是window.returnValue的简单应用,不是asp.net的专属内容.作为积累,记录一个简单的实现模型. 图1  用到的文件 从图1中我们可以看到,只用到了 ...

  9. c++map的用法 分类： POJ 2015-06-19 18:36 11人阅读 评论(0) 收藏

    c++map的用法 分类: 资料 2012-11-14 21:26 10573人阅读 评论(0) 收藏 举报 最全的c++map的用法 此文是复制来的0.0 1. map最基本的构造函数: map&l ...

  10. SharePoint API测试系列——Records.BypassLocks测试

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 对于SharePoint中已经是Record的Item,我们想要修改他的属性,这在UI界面是无法完 ...