<!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. zabbix server安装详解

    简介 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以 ...

  2. Python多线程和多进程谁更快？

    python多进程和多线程谁更快 python3.6 threading和multiprocessing 四核+三星250G-850-SSD 自从用多进程和多线程进行编程,一致没搞懂到底谁更快.网上很 ...

  3. 今天重装系统后，Wdows更新提示“windows update当前无法检查更新，因为未运行服务。您可能需要重新启动计算机”

    到百度搜了常用的解决方法,就是用命令提示符,但对我的情况不管用,提示“拒绝访问”.后来在08绿软站的一篇文章中找到了解决办法.原文如下(我本人也是用的第四种方法解决的): 试了下面几种解决方法,第四种 ...

  4. Vulkan Tutorial 09 图像视图

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 使用任何的VkImage,包括在交换链或者渲染管线中的,我们都需要创建VkImage ...

  5. css如何让div和页面等高？

    我们都知道,只要是block状态的标签,宽度和父级等宽,或者设置宽度100%也可以等宽,但设置高度100%是不管用的,那么如何让标签和页面等高呢,除了用js去动态计算设置高度值,用css也可以 只要将 ...

  6. Markdown软件推荐--Typora

    非常适合记录笔记. ▌ 所见即所得+所写即所得 Ctrl+/快捷键,转换成纯代码界面. ▌ CSS自设置样式 1.Theme下自带样式系列 2.File- Preference中选择Open Them ...

  7. JS阻塞以及CSS阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  8. Python处理Excel文件

    因为工作需求,需要审核一部分query内容是否有效,query储存在Excel中,文本内容为页面的Title,而页面的URL以HyperLink的格式关联到每个Cell. 于是本能的想到用Python ...

  9. Jexus部署.Net Core项目

    Jexus Jexus 即 Jexus Web Server,简称JWS,是Linux平台上 的一款ASP.NET WEB服务器.它是 Linux.Unix.FreeBSD 等非Windows系统架设 ...

  10. scrapy代理的设置

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