<!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. TensorFlow for R

    TensorFlow™ is an open source software library for numerical computation using data flow graphs. Nod ...

  2. 【译】Envoy with Nomad and Consul (一)

    原文: http://timperrett.com/2017/05/13/nomad-with-envoy-and-consul 在过去的许多年我的职业生涯一直是围绕着数据中心和平台基础设施.工作范围 ...

  3. JavaScript：window.onload问题

    前几天做一个点击按钮,就实现切换图片效果的小demo时,代码看上去没问题,就是达不到效果.让我百思不得其解. 代码如下: <!DOCTYPE html> <html> < ...

  4. python语言精粹《一》

    第一章 静态语言:需要声明类型.变量不能改变类型! 动态语言:(也称脚本语言)主要的应用场景都是很短的应用程序(脚本),比如给静态语言编写的程序进行数据预处理.这样的程序通常也统称胶水代码. pyth ...

  5. Android 图片加载框架Glide4.0源码完全解析（二）

    写在之前 上一篇博文写的是Android 图片加载框架Glide4.0源码完全解析(一),主要分析了Glide4.0源码中的with方法和load方法,原本打算是一起发布的,但是由于into方法复杂性 ...

  6. Scrapy爬虫大战京东商城

    Scrapy爬虫大战京东商城 引言 上一篇已经讲过怎样获取链接,怎样获得参数了,详情请看python爬取京东商城普通篇 代码详解 首先应该构造请求,这里使用scrapy.Request,这个方法默认调 ...

  7. Kubernets 资源类型简介

    # Node 代表 Kubernets 集群运行的宿主物理机或者虚拟服务器, 为容器提供必要的计算资源: 内存 与 CPU 等. # Pod 最底层的抽象. 一个 Pod 中可以包含一个或者多个运行的 ...

  8. Qt使用MySQL笔记一

    原始日期:2015-08-20 18:01 今天开发项目时,遇到一个问题,经过自己不断尝试,终于找到了解决办法,于是赶紧记下来,不然过段时间可能又忘了呵呵,从而重蹈覆辙,浪费时间~问题是这样的:在插入 ...

  9. HTML5+CSS3静态页面项目-PayPaul的总结

    学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...

  10. windbg工具安装配置及dump抓取

    安装与配置windbg 安装与配置windbg的symbol(符号) 第一步 下载WinDBG, 第二步 双击下载的文件安装windbg.安装时注意记住安装到那里了. 第三步 windbg访问符号需要 ...