前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的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. ServiceStack.Redis之IRedisClient 03_转

    事实上,IRedisClient里面的很多方法,其实就是Redis的命令名.只要对Redis的命令熟悉一点就能够非常快速地理解和掌握这些方法,趁着现在对Redis不是特别了解,我也对着命令来了解一下这 ...

  2. Hive报错之java.sql.SQLException: Field 'IS_STOREDASSUBDIRECTORIES' doesn't have a default value

    在创建表的时候报出如下错误: hive> create table if not exists testfile_table( > site string, > url string ...

  3. 通过Oracle数据库访问控制功能的方法（Database access control）

    修改sqlnet.ora文件中的IP列表后都需要重启监听才能生效.(原文是: Any changes to the values requires the TNS listener to be sto ...

  4. 20145227《Java程序设计》第3次实验报告

    20145227<Java程序设计>第3次实验报告 实验步骤与内容 一.实验内容 XP基础 XP核心实践 相关工具 二.实验过程 (一)敏捷开发与XP 1.XP是以开发符合客户需要的软件为 ...

  5. 使用UML进行项目开发

    一.概述 本文主要论述的内容是如何使用UML来指导(辅助)项目设计.在此篇文章中,假设读者对UML已经有了概念上的认识,对UML中出现的名词都能很好的理解. UML的目标是以面向对象图的方式来描述任何 ...

  6. Java提高篇---Stack

    在Java中Stack类表示后进先出(LIFO)的对象堆栈.栈是一种非常常见的数据结构,它采用典型的先进后出的操作方式完成的.每一个栈都包含一个栈顶,每次出栈是将栈顶的数据取出,如下: Stack通过 ...

  7. EasyUI扩展方法

    EasyUI扩展方法: 1.我想指定textarea的行,但editor:{type:'textarea', options: {rows:'4'}}这样写不行.请问大家怎么配置才是指定行的啊? 配置 ...

  8. 2016年6月25日 星期六 --出埃及记 Exodus 14:22

    2016年6月25日 星期六 --出埃及记 Exodus 14:22 and the Israelites went through the sea on dry ground, with a wal ...

  9. BZOJ3687：bitset STL

    [bzoj3687][FJ2014集训]简单题 2014年9月14日1,8212 [题目描述]小呆开始研究集合论了,他提出了关于一个数集四个问题:1. 子集的异或和的算术和.2. 子集的异或和的异或和 ...

  10. Git笔记 整理2

    补充: 1,如何只克隆git仓库中的一个分支? git clone -b <branch> <remote_repo> eg:  git clone -b vivien_dev ...