<!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. 从SonarQube谈设计模式

    SonarQube SonarQube是用来检测代码质量的,但类似工具的推广常常遇到阻碍. 成型项目或僵尸项目可以理解,项目优化需要投入的人力成本和时间成本太大,而且最主要的是无法保证改动过程中不引入 ...

  2. ArcGIS 网络分析[2.5] VRP(车辆配送)

    什么是VRP? VRP就是车辆配送. 大家有没有想象过一个城市的某个快递营业点,是怎么让各个快递员配送快递的? 每个快递员针对那片区域的客户,如何走路线才最省时间? 也许你会说,最短路径分析可以做到— ...

  3. Unity C# GetSaveFileName()的应用

    本文原创,转载请注明出处:http://www.cnblogs.com/AdvancePikachu/p/6944870.html 唉哟,这次厉害咯,网上搜罗了好久,终于被我找到汉化的保存对话框了,根 ...

  4. JS学习笔记——数组去重

    <script type="text/javascript"> //indexOf"是ECMAScript5方法,IE8以下不支持,需多写兼容低版本浏览器代码 ...

  5. 带着问题写React Native原生控件--Android视频直播控件

    最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法: 现在条件:视频播放控件(开源的ijk ...

  6. javascript走马灯的效果(文档标题文字滚动)

    做一些网站的时候,文档标题会滚动,这个效果是走马灯的效果. <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. 动态读取文件持续显示在UI上

    private void DisplayLogInfo(FileInfo _LastFile) { if (_LastFile != null) { StreamReader sr = null; t ...

  8. scrapy代理的设置

    scrapy代理的设置 在我的上一篇文章介绍了scrapy下载器中间件的使用,这里的scrapyIP的代理就是用这个原理实现的,重写了下载器中间件的process_request(self,reque ...

  9. java源码学习（二）Integer

    Integer类包含了一个原始基本类型int.Integer属性中就一个属性,它的类型就是int. 此外,这个类还提供了几个把int转成String和把String转成int的方法,同样也提供了其它跟 ...

  10. python+NLTK 自然语言学习处理：环境搭建

    首先在http://nltk.org/install.html去下载相关的程序.需要用到的有python,numpy,pandas, matplotlib. 当安装好所有的程序之后运行nltk.dow ...