前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的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. vs2010 仿XCode风格的头注释宏

    Sub DocumentFileHeader() Dim star As String star = "//***************************************** ...

  2. 创建sh文件

    创建sh文件 #/bin/bash v_file=$ v_type=$ v_desc=$ touch $v_file echo '#================================== ...

  3. linux打开文件数量的查看方法

    linux打开文件数量的查看方法 linux打开文件数量的查看方法在网上查到两种查看linux打开文件数量的查看方法,但结果不相同,linux查看文件打开数量是以那个文件或命令为标准呢? 搜索过关于u ...

  4. Hibernate，JPA注解@ManyToMany_JoinTable

    可以通过@ManyToMany注解可定义的多对多关联.同时,也需要通过注解@JoinTable描述关联表和关联条件.如果是双向关联,其中一段必须定义为owner,另一端必须定义为inverse(在对关 ...

  5. 给windows服务打包，并生成安装程序

    一. 添加新建项目-->安装部署-->安装项目 二.安装程序上-->右键视图-->文件系统-->应用程序文件夹-->右键-->添加项目输出 选择做好的wind ...

  6. JavaScript navigator 对象(转)

    navigator -- navigator对象通常用于检测浏览器与操作系统的版本 navigator,中文"导航器" 引用网址:http://www.dreamdu.com/ja ...

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

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

  8. Android 坐标与宽高研究getLeft() getTop() getRight()和getBottom()

    把view看做一个矩形,分别表示的是一个view的左边,上边,右边,下边距离他的父组件的距离. getRight() =getLeft() + getWidth() getBottom()= getT ...

  9. Can't create handler inside thread that has not called Looper.prepare()

    参考文章:http://stackoverflow.com/questions/7185942/error-while-dispaying-an-toast-message-cant-create-h ...

  10. selenium帮助手册以及 webdriver的各种driver

    帮助手册 http://selenium-python.readthedocs.io/locating-elements.html 转载于:http://blog.csdn.net/five3/art ...