前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效

今天为大家做的是多个物体的运动效果，

1:HTML

<body>

<ul>

      <li></li>

      <li></li>

      <li></li>

 </ul> 

</body>

2：css

<style type="text/css"> 

     body,*{margin: 0;padding: 0;}

     ul{list-style: none;} 

     ul li{width:300px;height: 100px;background: red;margin-top: 20px;}

</style>

3：javascript部分

<script type="text/javascript">

window.onload=function(){ //页面加载完毕执行匿名函数

     var allLi=document.getElementsByTagName("li"); /*获取所有li标签*/

     for(var i=0;i<allLi.length;i++){  /*遍历每个li并为每个li添加事件*/

          allLi[i].timer;   /*为每个li创建一个定时器容器*/

          allLi[i].onmouseover=function(){

               onOut(this,400);  /*调用函数并把当前的li作为参数方便函数体调用当前li*/

          }

          allLi[i].onmouseout=function(){

                onOut(this,300);

          }

     }

}

function onOut(that,width){ 

     clearInterval(that.timer); /*每次函数被调用的时候都先清空一下定时器*/

    that.timer=setInterval(function(){  /*函数调用时执行定时器 注意 这里我们为每个Li元素都定义了属于自己的一个定时器，防止了大家公用同一个定时器而造成的动画效果不一致问题*/

        var speed=(width-that.offsetWidth)/5;   /*定义变化的速度*/

          speed=speed>0?Math.ceil(speed):Math.floor(speed);

          if(that.offsetWidth==width){ /*到达目标宽度的时候删除定时器，防止无限变宽*/

               clearInterval(that.timer);

          }else{ that.style.width=that.offsetWidth+speed+"px";} /*把当前Li的宽度定义为当前Li的宽度+预先定义好的宽度*/

     },10)





}

</script>

效果

现在我们改一个效果，多个物体的透明度变化

1：HTML

<body>

     <div></div>

     <div></div>

     <div></div>

</body>

2：CSS

<style type="text/css"> 

     body,*{margin: 0;padding: 0;}

     div{width: 250px;height: 250px;float:  left;margin: 5px;background: blue;filter:alpha(opacity:20);opacity:0.2 }

    

</style>

3：JS

<script type="text/javascript">

window.onload=function(){

     var div=document.getElementsByTagName("div");

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

     div[i].onmouseover=function(){

          onOut(this,100);

     }

     div[i].onmouseout=function(){

         onOut(this,20); 

     }

     div[i].opa=20; /*为每个div设置一个透明度的属性  值得注意的的是多物体的运动的多有变量都不能公用以防止资源争用*/

}

}

var timer;

function  onOut(that,tar){

     clearInterval(that.timer);

     var speed;

     that.timer=setInterval(function(){  /*为每个div创建自己的定时器*/

         if(tar>that.opa){

          speed=+10;

         }else{

           speed=-10;

         } 

          if(that.opa==tar){

                 clearInterval(timer);   

               }





          else{

               that.opa+=speed;

       that.style.opacity=that.opa/100;

     that.style.filter="alpha(opacity:'+that.opa+')";

          }





     },20)

}









</script>

效果

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的小特效（多个运动效果整理）

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

  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. shell中读写mysql数据库

    本文介绍了如何在shell中读写mysql数据库.主要介绍了如何在shell 中连接mysql数据库,如何在shell中创建数据库,创建表,插入csv文件,读取mysql数据库,导出mysql数据库为 ...

  2. 25、oracle（一）

    1)了解oracle背景,概念和特点 2)掌握oracleSQL对单表各种查询操作 3)掌握oracleSQL中函数的使用 4)掌握数值型number,字符串型varchar2,日期型date,条件判 ...

  3. Codeforces 735C：Tennis Championship（数学+贪心）

    http://codeforces.com/problemset/problem/735/C 题意:有n个人打锦标赛,淘汰赛制度,即一个人和另一个人打,输的一方出局.问这n个人里面冠军最多能赢多少场, ...

  4. SURF

    推荐:http://www.cnblogs.com/tornadomeet/archive/2012/08/17/2644903.html SURF-Speeded Up Robust Feature ...

  5. java 判断某一天是当年的哪一天

    题目:输入年份,月份,日,判断这一天是这一年的第几天?(闰年的2月份为29天,平年为28天) public class Runnian { /** * 能被4整除且不能被100整除或者能被400整除的 ...

  6. ACM第二站————归并排序

    转载请注明出处,谢谢!http://www.cnblogs.com/Asimple/p/5459664.html 归并排序————二分的思想 以中间的数为基准,每次排序都将比其小[升序排](大[降序排 ...

  7. 局域网 其它主机ping不通win7， 解决

    默认情况下,Windows 7出于安全考虑不允许外部主机对其进行Ping测试. 允许ICMP回显 设置如下: 1. 打开win7防火墙设置界面 2. 左边的菜单中选择 [高级设置] 3. 在弹出的 [ ...

  8. YTU 3006: 迷宫问题（栈与队列）

    3006: 迷宫问题(栈与队列) 时间限制: 1 Sec  内存限制: 128 MB 提交: 3  解决: 1 题目描述 编写一个求解迷宫问题的程序,要求输出迷宫的所有路径,并求最短路径长度及最短路径 ...

  9. Cookie机制（会话cookie和持久化cookie）在客户端保持HTTP状态信息的方案

    1. Cookie只有一个name和一个value,不同于map;购物车设计的时候需要cookie,获取购物车的cookie id,以便于将物品多次放入购物车: 2.cookie获取了其地址,并且可以 ...

  10. Wall(凸包POJ 1113)

    Wall Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 32360 Accepted: 10969 Description On ...