<!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. neutron flat和vxlan网络访问外网流量走向

    OpenStack版本:Mitaka 物理节点: Hostname Management IP Tunnel IP Role test-ctrl-01 192.168.100.11 192.168.1 ...

  2. 关于微信小程序的的总结

    微信小程序学完了,给大家分享一些自己学小程序的心得,希望能帮到大家. 首先,我谈谈小程序数据绑定的那一块,所有从本地或者远程服务器的API传过来,都必须绑定到data: {}, 绑定格式是一个一个的键 ...

  3. MD5加密算法（信息摘要算法）、Base64算法

    1 什么是MD5 信息摘要算法,可以将字符进行加密,每个加密对象在进行加密后都是等长的 应用场景:将用户密码经过MD5加密后再存储到数据库中,这样即使是超级管理员也没有能力知道用户的具体密码是多少:因 ...

  4. Redis大幅性能提升之Batch批量读写

    Redis大幅性能提升之Batch批量读写 提示:本文针对的是StackExchange.Redis 一.问题呈现 前段时间在开发的时候,遇到了redis批量读的问题,由于在StackExchange ...

  5. 前端向后台的华丽转身 — PHP入门篇

    三个月就这么悄悄溜走了,本K对于前端虽然有了一定的认识,但对一些方面还是处于一种比较萌币的状态,就在这种萌币状态下,本K又跟着大神浩开始了后台语言-PHP语言的学习.PHP的学习对于学过其他语言的人来 ...

  6. spring quartz开发中使用demo

    1.首先在pom.xml中配置quartz的jar: <!--定时器--> <dependency> <groupId>org.quartz-scheduler&l ...

  7. 请教 C# 异步 async await 问题

    各位园友,之前对C#异步只是肤浅了解,请教一个具体问题. 需求: 前台会发送一个Array,这个数组都是 id的集合,比较大.分两步,首先保存这些id,然后去调用异步方法. 可以正常返回json,也可 ...

  8. iptables实用教程（一）：基本概念和原理

    概述 iptables是linux自带的防火墙软件,用于配置IPv4数据包过滤或NAT(IPv6用ip6tables). 在linux上,防火墙其实是系统内核的一部分,基于Netfilter构架,基本 ...

  9. <iOS 组件与框架> -- UIKit Dynamics

    UIKit Dynamics 结合 『iOS 组件与框架 』一书.总结的知识点与demo demo 地址: GitHub地址 一.概述 1.UIKit Dynamics 是 iOS 7 新增的内容.其 ...

  10. bootstrap之daterangepicker---汉化以及扩展

    一.扩展的功能 1.初始化时,会自动创建一个select标签: 2.当改变select值时,日期也会自动改变,并且会调用apply按钮的click事件 3.点击此处进行预览 4.github地址:ht ...