<!DOCTYPE html>

<html>

<head>

	<title>css动画</title>

</head>

<body>

<script type="text/javascript">

/**

 * 将e转化为相对定位的元素，使之左右“震动”

 * 第一个参数可以是元素对象或者元素的id

 * 如果第二个参数是函数，以e为参数，他将在动画结束时调用

 * 第三个参数指定e震动的距离，默认是5像素

 * 第四个参数指定震动多久，默认是500毫秒

 */

function shake( e , oncomplete , distance , time ){

	//句柄参数

	if(typeof e === "string")

		e = document.getElementById(e);

	if(!time)

		time=500;
　　　　　if(!distance)
　　　　　　　　distance = 5;
	var orginalStyle = e.style.cssText;		//保存e的原始style

	e.style.position ="relative";			//使e相对定位

	var start = (new Date()).getTime();		//注意：动画的开始时间

	animate();		//动画开始

	//函数检查消耗的时间，并更新e的位置

	//如果动画完成，他将e还原为原始状态

	//否则，它更新e的位置，安排他自身重新运行

	function animate(){

		var now = (new Date()).getTime();	//得到当前时间

		var elapsed = now-start;			//从开始依赖消耗了多长时间

		var fraction = elapsed/time;		//是总时间的几分之几

		if(fraction < 1 ){					//如果话未完成

			//作为动画完成比例的函数，计算e的x位置

			//使用正弦函数将完成比例乘以4pi

			//所以，他来回往复两次

			var x = distance*Math.sin(fraction*4*Math.PI);

			e.style.left = x+"px";

			//在25毫秒后或在总时间的最后尝试再次运行函数

			//目的是为了产生每秒40帧的动画

			setTimeout(animate,Math.min(25,time-elapsed));

		}

		else{			//否则动画完成

			e.style.cssText = orginalStyle;		//恢复原有样式

			if(oncomplete)

				oncomplete(e);

		}

	}

}

/**

 * 以毫秒级的时间将e从完全不透明淡出到完全透明

 * 在调用函数时，假设e是完全不透明的

 * oncomplete是一个可选的函数，以e为参数，它将在动画结束时调用

 * 如果不指定time，默认是500毫秒

 * 该函数在IE中不能正常工作，但也可以修改的能工作

 * 除了opacity，IE使用非标准的filter属性

 */

function fadeOut( e , oncomplete , time ){

	if( typeof e ==="string")

		e = document.getElementById(e);

	if(!time)

		time = 500;

	//使用Math.sqrt作为一个简单的“缓存函数”来创建动画

	//精巧的非线性，一开始淡出的比较快，然后缓慢了一些

	var ease = Math.sqrt;

	var start = (new Date()).getTime();		//注意；动画开始的时间

	animate();								//动画开始

	function animate(){

		var elapsed = (new Date()).getTime()-start;		//消耗的时间

		var fraction = elapsed/time;					//总时间的几分之几

		if(fraction < 1) { 			//如果动画未完成

			var opacity = 1 - ease(fraction);		//	计算元素的不透明度

			e.style.opacity = String(opacity); 		//设置在e上

			setTimeout(animate,Math.min(25,time-elapsed));

		}else{

			e.style.opacity = "0";

			if(oncomplete) oncomplete(e);

		}

	}

}

</script>

<button onclick="shake(this,fadeOut)">淡入淡出</button>

</body>

</html>

　　

JavaScript实现淡入淡出的更多相关文章

  1. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  2. javascript背景淡入淡出

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. javascript写淡入淡出效果的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JQ淡入淡出效果

    <script type="text/javascript"> //页面淡入淡出 $(document).ready(function() { $('body').hi ...

  5. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  6. javascript淡入淡出效果的实现思路

    这个思路是最近写XScroll.js类的时候想明白的.平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了.不过经过分析,我觉得其实只需要一半就行了如题,只有思路,没有代码. 这个思 ...

  7. javascript多物体运动案例：多物体淡入淡出

    javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...

  8. 练习：javascript淡入淡出半透明效果

    划过无透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

随机推荐

  1. 基于binlog来分析mysql的行记录修改情况（python脚本分析）

          最近写完mysql flashback,突然发现还有有这种使用场景:有些情况下,可能会统计在某个时间段内,MySQL修改了多少数据量?发生了多少事务?主要是哪些表格发生变动?变动的数量是怎 ...

  2. zookeeper3.4.9 centos6.5 集群安装

    安装jdk http://www.cnblogs.com/xiaojf/p/6568426.html [root@m1 jar]# .tar.gz -C ../ [root@m1 jar]# cd . ...

  3. elasticsearch 不能通过9200端口访问

    修改配置文件 config/elasticsearch.yml network.host: 0.0.0.0

  4. javascript基础-HTML5

    跨文档消息(Web Messaging cross-document messaging) 原理 往有关联(同一框架/弹出)的文档传递数据. Message Channel在javascript基础- ...

  5. CI Weekly #20 | 从持续集成的角度看 “云” 的价值

    很多移动开发工程师对 fastlane 耳熟能详,最近 flow.ci 的 iOS 工作流「编译」这步已采用 fastlane gym 工具(iOS 应用打包签名自动化),进一步优化了构建打包速度.快 ...

  6. Eclipse中常用的快捷键,敏捷开发必备.

    1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xm ...

  7. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  8. 关于Eclipse+SVN 开发配置

    入职快一个月,学的比较慢,但学的东西很多,受益匪浅.有时候真正意义上,感受到:代码使我快乐,我爱编程. 好久没有开笔,不知道说些什么,也不知道应该说什么. 但总觉得有些东西,很想说出来,不用理会他人的 ...

  9. Spring学习（19）--- Schema-based AOP(基于配置的AOP实现) --- 配置切面aspect

    Spring所有的切面和通知器都必须放在一个<aop:config>内(可以配置包含多个<aop:config>元素),每个<aop:config>包含pointc ...

  10. jsp 文件使用 include指令 导入 jspf 分析，及导入jspf 文件后出现乱码问题

    1.为什么要导入jspf文件 在做网站开发中,因为有很多的页面的导航栏是相同的,所以我们要把导航栏提取出来,生成一个jspf文件. 然后在jsp页面中使用 include 指令 导入jspf文件,这样 ...