链式运动就是当一个运动完，又启动另外一个运动，这个怎么实现呢？这里我们是用用回调函数实现一套链式动画

显示给div左移100像素，然后然后透明度变100

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>链式运动</title>
  6. 	<style>
  7. 		.animation{
  8. 			background-color: green;
  9. 			height: 200px;
  10. 			width: 200px;
  11. 			position: absolute;
  12. 			opacity: 0.3;
  13. 			left:0px;
  14. 			filter:alpha(opacity:30);
  15. 		}
  16. 	</style>
  17. </head>
  18. <body>
  19. 	<div id="test" class="animation" ></div>
  20. </body>
  21.  <script type="text/javascript">
  22.     window.onload = function(){
  23.     	var ele = document.getElementById("test"),
  24.             timer = null;
  25.     	//alert(getStyle(ele,'opacity'))
  26.     	ele.onmouseover = function(){
  27.     		startAnimation(ele,'left',100,function(){
  28.     			startAnimation(ele,'opacity',100);
  29.     		});
  30.  
  31.     	}
  32.  
  33.        function startAnimation(node,attr,target,fn){
  34.        	//1.清空定时器
  35.        	 clearInterval(timer);
  36.        	 //2.重新生成一个定时器
  37.        	 timer = setInterval(function(){
  38.        	 	  var _currentAttrValue = null
  39.        	 	  if(attr == 'opacity'){
  40.        	 	  	_currentAttrValue = Math.round(parseFloat(getStyle(node,attr))*100);
  41.        	 	  }else{
  42.        	 	  	_currentAttrValue = parseInt(getStyle(node,attr));
  43.        	 	  }
  44.        	 	   //3.当对应的属性到达了目标想要的属性，那么就清除定时器，并调用回调函数
  45.        	 	  if(_currentAttrValue == target){
  46.        	 	  	clearInterval(timer);
  47.        	 	  	if(fn){
  48.        	 	  		fn();
  49.        	 	  	}
  50.        	 	  }else{
  51.        	 	  	_currentAttrValue ++ ;
  52.        	 	  	if(attr == 'opacity'){
  53.        	 	  		node.style[attr] = _currentAttrValue/100;
  54.        	 	  		node.style.filter = 'alpha(opacity:'+_currentAttrValue+')';
  55.        	 	  	}else{
  56.        	 	  		console.log(_currentAttrValue);
  57.        	 	  		node.style[attr] = _currentAttrValue+'px';
  58.        	 	  	}
  59.  
  60.        	 	  }
  61.  
  62.        	 },10)
  63.        }
  64.  
  65.        function getStyle(ele,attr){
  66.  
  67. 	       	if(window.getComputedStyle){
  68. 	       		return getComputedStyle(ele,null)[attr];
  69. 	       	}else{
  70. 	       		return ele.currentStyle[attr];
  71. 	       	}
  72.  
  73.        }
  74.  
  75.     }
  76.  </script>
  77. </html>

　　大家可以看看效果

js动画之链式运动的更多相关文章

  1. js动画--链式运动

    前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...

  2. JS之链式运动，及任意值运动框架，包括透明度的改变

    链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, function ...

  3. （43）JS运动之链式运动框架

    链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个參数function,这个function表示下一个要运行的动作.详细代码例如以下: <!DOCTYPE HTML> &l ...

  4. js动画之简单运动一

    虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...

  5. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  6. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

  7. js动画之同时运动

    一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...

  8. Javascript之链式运动框架1

    第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...

  9. js动画之简单运动二

    透明度的变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. 在ionic/cordova中使用百度地图插件

    在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...

  2. ListView下拉加载二(分页)

    这次在一的基础上做了数据通过HttpClient远程获取显示 并且分页,首先看下效果吧: 以上就是效果图了 下面看下具体代码实现吧 主要代码和上节差不多 主入口代码: package com.tp.s ...

  3. 根据标记清空页面中所有的input对象

    function clear1(flag) { //获取页面中所有的input对象 var inputs = document.getElementsByTagName("input&quo ...

  4. JSP学习

    http://blog.csdn.net/javaeeteacher/article/details/1932447

  5. 【学习笔记】在原生javascript中使用ActiveX和插件

    什么是插件 现在的浏览器提供了大量的内置功能,但仍然有一些工作无法完成,如播放音频和视频.插件及其扩展浏览器功能就尤为重要. 插件是可下载的应用程序,可以插入到浏览器中,现在有很多不同的插件,常用的有 ...

  6. Windows_RTM_RC

    1.https://zhidao.baidu.com/question/172764638.html RTM(Release to Manufacturing)版 软件在正式在零售商店上架前,需要一段 ...

  7. Java四种线程池

    Java四种线程池newCachedThreadPool,newFixedThreadPool,newScheduledThreadPool,newSingleThreadExecutor 时间:20 ...

  8. VERY DEEP CONVOLUTIONAL NETWORKS FOR LARGE-SCALE IMAGE RECOGNITION 这篇论文

    由Andrew Zisserman 教授主导的 VGG 的 ILSVRC 的大赛中的卷积神经网络取得了很好的成绩,这篇文章详细说明了网络相关事宜. 文章主要干了点什么事呢?它就是在在用卷积神经网络下, ...

  9. hive修改 表/分区语句

    参考 https://cwiki.apache.org/confluence/display/Hive/LanguageManual+DDL#LanguageManualDDL-AlterTable% ...

  10. 【转】 如何使用Valgrind memcheck工具进行C/C++的内存泄漏检测

    系统编程中一个重要的方面就是有效地处理与内存相关的问题.你的工作越接近系统,你就需要面对越多的内存问题.有时这些问题非常琐碎,而更多时候它会演变成一个调试内存问题的恶梦.所以,在实践中会用到很多工具来 ...