前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的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. grd文件结构

  2. ffmpeg无法接收组播流问题处理

    问题:ffmpeg无法对IP组播进行处理,表现如下 [root@os01 /]# ffprobe udp://225.0.0.2:9000 ffprobe version Copyright (c) ...

  3. 转Class.forName()用法详解

    主要功能 Class.forName(xxx.xx.xx)返回的是一个类 Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类, 也就是说JVM会执行该类的静态代码段 ...

  4. recycleview中使用checkbox导致的重复选中问题

    参考博文:http://www.myexception.cn/mobile/1852852.html 在使用RecycleView做仿微信图片选择器,其中条目中使用了checkbox,在选中时由于ho ...

  5. Oracle字符集设置

    客户端与服务端字符集不一致会造成乱码问题. 在服务端: sql>SELECT * FROM NLS_DATABASE_PARAMETERS; 在查询结果中关注如下参数: nls_language ...

  6. MySQL 及 SQL 注入

    如果您通过网页获取用户输入的数据并将其插入一个MySQL数据库,那么就有可能发生SQL注入安全的问题. 本章节将为大家介绍如何防止SQL注入,并通过脚本来过滤SQL中注入的字符. 所谓SQL注入,就是 ...

  7. JQuery-Table斑马线

    HTML <html> <head> <link href="StyleSheet.css" rel="stylesheet" t ...

  8. HDU(2485)，最小割最大流

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2485 Destroying the bus stations Time Limit: 40 ...

  9. C++运算法优先级

  10. 利用Spire for .NET实现办公自动化——Spire.Doc

    今天研究了一下E-ICEBLUE公司的Spire for .NET系列产品.我们可以通过利用这个系列的dll库文件轻松的实现办公自动化的需求,而且不需要安装相应的办公软件.有关于Spire .NET系 ...