前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的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. JavaEE基础（十三）

    1.常见对象(StringBuffer类的概述) A:StringBuffer类概述 通过JDK提供的API,查看StringBuffer类的说明 线程安全的可变字符序列 B:StringBuffer ...

  2. 浏览器检测navigator 对象

    1.浏览器及版本号不同的浏览器支持的功能.属性和方法各有不同.比如IE 和Firefox 显示的页面可能就会有所略微不同. alert('浏览器名称:' + navigator.appName); a ...

  3. Java获取当前第几周【转】

    本文copy自:http://swxzqsd.blog.sohu.com/156208509.html 作者:camelcanoe String today = "2010-01-11&qu ...

  4. 凯撒加密解密（java字母移位）

    1.设计思想:加密就是将字符数据转化为ASC码表中的数字,a—w之间通过加3之后再转化为字符型输出,x—z之间通过转化为ASC码表中的数字后减去23再转化为字符型输出.解密就是将字符数据转化为ASC码 ...

  5. 清空html代码

    不要使用 $("XXX").html(""); 清空html代码块一般有两种方式: 1)非miniui等组件区块:$("#id").empt ...

  6. oneThink安装出错解决

    在Wampserver3.0.0(apache2.4.17+php5.6.15+mysql5.7.9)版本中oneThink安装用1.1github版,不要用1.1开发版,不然安装的时候数据库导入时b ...

  7. 基于kickstart定制自动化安装的linux镜像系统

    使用软件和平台 1.基于平台:                  Vmware workstation 8.0 2.基于系统镜像:               rhel-server-5.8-i386 ...

  8. linux 切换多个jdk脚本

    1,编写脚本 jdkswitch.sh #!/bin/sh # usage: . this_file [argvs] openjdk7_home=/usr/lib/jvm/java--openjdk- ...

  9. msm8916 lcd 相关调试点指导

    主要代码:LINUX\android\kernel\arch\arm\boot\dts\qcom\dsi-panel-trust-hx8379c-fwvga-video.dtsiLINUX\andro ...

  10. 关于三星A7屏幕锁已由管理员、加密政策，或证书存储禁用

    解决办法:设定-安全-清除证书-再返回锁定屏幕-把密码锁定-改为滑动.....