制作炫酷的专题页面

很多时候，我们需要一些炫酷的动画效果，让页面更加吸引用户的眼球，现有比较好用的JS动画库有：velocity和GSAP(支持falsh和js)。今天这里主要学习的是velocity配合css3动画，快速打造属于你的专题页面。

PS：发现各种炫酷的效果都是由这些简单的动作通过组合实现的，发现最终效果和动画的设计者有很大关系，鄙人就属于那种不怎么懂设计的人，这里只是抛砖引玉。

虽然我今天不准备详细介绍GSAP这个动画库，但是还有有必要把相关资源的入口放在这里，供想要了解的 同学进行深入的 学习。

最好的学习就是查看官方API文档，其次结合场景才会出现的问题，可以交流一下应该就可以解决。

废话不多说了，进入今天的正题。

基础技能

velocity功能

包含$.animate()所有功能，并且包含切换、转换、循环、缓动、CSS切换、scroll功能，从效率角度来说，比CSS更高。

兼容性

支持IE8+，chrome、firefox、android、ios（可以配置mobileMA，提升手机访问效果）

默认配置

可以使用$.Velocity.defaults进行查看管理。

注：关于配置的使用说明，可以参考官方文档说明。其中begin、complete监听动画状态

调用方式

支持两种书写方式

  • 第一种：
 /**
  * @param {Object|String} 需要改变css属性最终状态值或者是注册动画
  * @param {Object} 动画基本配置，可以查看默认配置
  */
$element.velocity(properties, options)

　　

  • 第二种
/**
 * @param {Object} 操作元素，可以是原生对象，也可以是包装对象
 * @param {Object|String} 需要改变css属性最终状态值或者是注册动画
 * @param {Object} 动画基本配置，可以查看默认配置
 */
$.Velocity($element, properties, options);

　　

另：所有的属性值都可以是函数，返回最终的值

 提升技能

自定义动画效果

velocity提供了注册自定义动画的方法，方便使用者自定义，并进行方便多次使用

$.Velocity.RegisterEffect(name, {
	defaultDuration: duration,
	calls: [
		[ { property: value }, durationPercentage, { options } ],
		[ { property: value }, durationPercentage, { options } ]
	],
	reset: { property: value, property: value }

});

　　

来一个简单的例子：

 $.Velocity.RegisterEffect("callout.pulse", {
	defaultDuration: 900,
	calls: [
		[ { scaleX: 1.1 }, 0.50 ],
		[ { scaleX: 1 }, 0.50 ]
	]
});

　　

注册一个callout.pulse方法，如何进行使用呢？可以参照基础技能中的调用方式，这里使用其中一种方式

$elements.velocity(‘callout.pulse‘); //相当于是properties参数值

UI pack--动画包

官方提供一些动画包，可以直接进行使用，也可以通过自定义注册动画，然后进行使用。

现有的的动画效果有：

callout.bounce,callout.shake,callout.flash,callout.pulse,callout.swing,callout.tada,transition.fadeIn,transition.fadeOut,transition.flipXIn,transition.flipXOut,transition.flipYIn,transition.flipYOut,transition.flipBounceXIn,transition.flipBounceXOut,transition.flipBounceYIn,transition.flipBounceYOut,transition.swoopIn,transition.swoopOut,transition.whirlIn,transition.whirlOut,transition.shrinkIn,transition.shrinkOut,transition.expandIn,transition.expandOut,transition.bounceIn,transition.bounceOut,transition.bounceUpIn,transition.bounceUpOut,transition.bounceDownIn,transition.bounceDownOut,transition.bounceLeftIn,transition.bounceLeftOut,transition.bounceRightIn,transition.bounceRightOut,transition.slideUpIn,transition.slideUpOut,transition.slideDownIn,transition.slideDownOut,transition.slideLeftIn,transition.slideLeftOut,transition.slideRightIn,transition.slideRightOut,transition.slideUpBigIn,transition.slideUpBigOut,transition.slideDownBigIn,transition.slideDownBigOut,transition.slideLeftBigIn,transition.slideLeftBigOut,transition.slideRightBigIn,transition.slideRightBigOut,transition.perspectiveUpIn,transition.perspectiveUpOut,transition.perspectiveDownIn,transition.perspectiveDownOut,transition.perspectiveLeftIn,transition.perspectiveLeftOut,transition.perspectiveRightIn,transition.perspectiveRightOut

　　

具体效果可以查看最下面的例子。

自定义动画队列

官方提供了执行动画队列的方法，$.Velocity.RunSequence(animationArr);其中animationArr是动画数组，数组的每个元素是一个元素动画效果，具体例子如下：

var mySequence = [
	 { elements: $element1, properties: { translateX: 100 }, options: { duration: 1000 } },
	 { elements: $element2, properties: { translateX: 200 }, options: { duration: 1000, sequenceQueue: false },
	 { elements: $element3, properties: { translateX: 300 }, options: { duration: 1000?}
];
$.Velocity.RunSequence(mySequence);
//默认队列动画是按照顺序执行的，可以通过设置sequenceQueue改变当前元素执行时机。默认是true，当为true时，指的是按照顺序执行，如果设置成false指的是，可以和上一个元素动画同时执行

　　

支持promise

引入官方推荐的bluebird和when，即可采用如下使用方式：

 $element.velocity(properties, options).then(); //需要注意是的是无线循环和队列不支持该形式

　　

终极技能

配合css3动画，达到最佳效果

友情提示：

    velocity在进场和出场动画方面优势比较大，css3在循环动画上优势比较大。当然万恶的IE兼容问题

基于上面所讲到的，实现了一个基于jquery、velocity、animation.css实现的动画，仅供参考

/**
 * 动画处理
 * author: 黑MAO
 */
$(function() {
	‘use strict‘;

	/****内部方法开始****/
	/**
	 * css动画执行函数
	 * @param {Object} 目标元素
	 * @param {String} 初始class
	 * @param {String} 动画类型
	 * @param {Number} 动画时长
	 * @param {Number} 动画延迟
	 * @param {Number} 循环次数
	 */
	var timer;
	function _cssRun(targetEl, className, animation, duration, delay, loop) {
		duration = duration*1 || 1000;
		delay = delay*1 || 0;
		loop = (loop || loop == 0) ? loop*1 : 1;

		if(loop < 1) {
			loop = ‘infinite‘;
		}
		$(targetEl).removeClass();
		$(targetEl).addClass(className).addClass(animation);
		$(targetEl).css({
			‘animation-duration‘: duration+‘ms‘,
			‘animation-delay‘: delay+‘ms‘,
			‘animation-iteration-count‘: loop+‘‘
		});
		if(loop != ‘infinite‘) {
			clearTimeout(timer);
			timer = setTimeout(function() {
				$(targetEl).removeClass(animation);
			}, duration*loop + delay);
		}

	}
	/**
	 * 监听select变化方法
	 * @param {Object} 目标元素
	 * @param {Object} 操作元素集合
	 * @param {String} 初始class
	 * @param {String} 动画类型 ["css", "js"]
	 */
	function _changeFunc(targetEl, opElementObj, className, animationType) {
		var animation = $(opElementObj.animationEl).val();
		var duration = $(opElementObj.durationEl).val();
		var delay = $(opElementObj.delayEl).val();
		var loop = $(opElementObj.loopEl).val();
		if(animationType == "css") {
			_cssRun(targetEl, className, animation, duration, delay, loop);
		}else {
			var ras = new Ras();
			if(animation) {
				ras.run(targetEl, ‘stop‘);
				ras.run(targetEl, animation, {duration: duration, delay: delay, stagger: 200, drag: true});
			}
		}
	}
	/**
	 * 初始化动画
	 * @param {Array} 动画数组
	 * @param {Object} 操作元素对象
	 * @param {Object} 目标元素
	 * @param {Number} 动画延迟
	 * @param {String} 需要显示的动画类型 ["show", "hide", "normal", "all"]
	 * @param {String} 动画类型 ["css", "js"]
	 */
	function _initAnimation(animationArr, opElementObj, targetEl, type, animationType) {
		var conf = opElementObj;
		var className = $(targetEl).attr("class");

		$(conf.animationEl).prepend(‘<option value="" diabled="disabled">选择动画类型</option>‘);
		$(animationArr).each(function(key, val) {
			var isShow = false;
			switch(type) {
				case "show":
					if(val.indexOf(‘In‘) > 0) {
						isShow = true;
					}
					break;
				case "hide":
					if(val.indexOf(‘Out‘) > 0) {
						isShow = true;
					}
					break;
				case "normal":
					if(val.indexOf(‘Out‘) == -1 && val.indexOf(‘In‘) == -1) {
						isShow = true;
					}
					break;
				default:
					isShow = true;
					break;
			}
			isShow && $(conf.animationEl).append(‘<option value="‘+val+‘">‘+val+‘</option>‘);
		});
		$(conf.animationEl).on(‘change‘, function() {
			_changeFunc(targetEl, conf, className, animationType);
		});
		$(conf.durationEl).on(‘change‘, function() {
			_changeFunc(targetEl, conf, className, animationType);
		});
		$(conf.delayEl).on(‘change‘, function() {
			_changeFunc(targetEl, conf, className, animationType);
		});
		$(conf.loopEl).on(‘change‘, function() {
			_changeFunc(targetEl, conf, className, animationType);
		});
	}

	/****内部方法结束****/

	function Ras(opts) {
		var conf = {
			beforeIndex : 0, //上一页序列号
			currentIndex : 0, //当前页序列号
			playing : true, //是否在运行
			downward : true, //是否向下滚动
			imgList: [], //页面内图片列表
			quenes: {
				show: [], //页面显示列表
				hide: [] //页面隐藏列表
			},
			navFunc: null, //导航回调函数
			cssAnimationExtra: [], //css动画扩展
			jsAnimationExtra: [] //js动画扩展
		};

		this.conf = $.extend(conf, opts);
	}
	//对外暴漏
	window.Ras = Ras;

	$.extend(Ras.prototype, {
		init: function() {
			var self = this;
			var conf = this.conf;
			//绑定键盘和鼠标事件
			var quenes = conf.quenes;
			var showList = conf.quenes.show;
			var hideList = conf.quenes.hide;
			var senceNum = showList.length;
			$(document).on(‘mousewheel keyup‘,function(e){
				if( !conf.playing ){
					conf.playing = true;
					if( e.keyCode && (e.keyCode==39||e.keyCode==40)){
						conf.downward = true;
					}
					if( e.keyCode && (e.keyCode==37||e.keyCode==38) ){
						conf.downward = false;
					}
					if( e.deltaY){
						conf.downward = e.deltaY<0?true:false;
					}
					if( e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40 || e.deltaY ){
						conf.beforeIndex = conf.currentIndex;
						conf.currentIndex = conf.downward ?conf.currentIndex + 1:conf.currentIndex - 1;
						conf.currentIndex = conf.currentIndex>=senceNum?0:conf.currentIndex;
						conf.currentIndex = conf.currentIndex<0?senceNum-1:conf.currentIndex;
						conf.navFunc && conf.navFunc(conf.currentIndex);
						self.show(hideList[conf.beforeIndex], showList[conf.currentIndex], function() {
							conf.playing = false;
						});
					}
				}
				return false;
			});

			//处理图片预加载
			var imgList = conf.imgList;
			imgList.length && self.imgLoader(imgList);

			//默认显示第一屏
			self.show(null, showList[0], function() {
				conf.playing = false;
			});
		},
		/**
		 * 初始化CSS动画
		 * @param {Object} 联动元素集合
		 * @param {Object} 目标元素
		 * @param {String} 选项类型 ["show", "hide", "normal", "all"]
		 */
		initCssAnimation: function(opElementObj, targetEl, type) {
			var conf = this.conf;
			var animationStr = ‘bounce,pulse,rubberBand,shake,swing,tada,bounceIn,bounceInDown,bounceInLeft,bounceInRight,bounceInUp,bounceOut,bounceOutDown,bounceOutLeft,bounceOutRight,bounceOutUp,fadeIn,fadeInDown,fadeInDownBig,fadeInLeft,fadeInLeftBig,fadeInRight,fadeInRightBig,fadeInUp,fadeInUpBig,fadeOut,fadeOutDown,fadeOutDownBig,fadeOutLeft,fadeOutLeftBig,fadeOutRight,fadeOutRightBig,fadeOutUp,fadeOutUpBig,flip,flipInX,flipInY,flipOutX,flipOutY,lightSpeedOut,rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight,rotateOut,rotateOutDownLeft,rotateOutDownRight,rotateOutUpLeft,rotateOutUpRight,hinge,rollIn,rollOut,zoomIn,zoomInDown,zoomInLeft,zoomInRight,zoomInUp,zoomOut,zoomOutDown,zoomOutLeft,zoomOutRight,zoomOutUp,slideInDown,slideInLeft,slideInRight,slideInUp,slideOutDown,slideOutLeft,slideOutRight,slideOutUp,magic,openDownLeft,openDownRight,openUpLeft,openUpRight,openDownLeftRetourn,openDownRightRetourn,openUpLeftRetourn,openUpRightRetourn,openDownLeftOut,openDownRightOut,openUpLeftOut,openUpRightOut,perspectiveDown,perspectiveLeft,perspectiveRight,perspectiveUp,perspectiveDownRetourn,perspectiveLeftRetourn,perspectiveRightRetourn,perspectiveUpRetourn,puffIn,puffOut,rotateDown,rotateLeft,rotateRight,rotateUp,slideDown,slideLeft,slideRight,slideUp,slideDownRetourn,slideLeftRetourn,slideRightRetourn,slideUpRetourn,swap,twisterInDown,twisterInUp,vanishIn,vanishOut,swashOut,swashIn,foolishOut,holeOut,tinRightOut,tinLeftOut,tinUpOut,tinDownOut,tinRightIn,tinUpIn,tinDownIn,bombRightOut,bombLeftOut,boingInUp,boingOutDown,spaceOutUp,spaceOutRight,spaceOutLeft,spaceInUp,spaceInRight,spaceInDown,spaceInLeft,boomIn,circleRotate‘;
			var animationArr = animationStr.split(‘,‘);
			var arr = [];
			$.merge(arr, animationArr, conf.cssAnimationExtra);
			arr = $.unique(arr);
			_initAnimation(arr, opElementObj, targetEl, type, ‘css‘);
		},
		/**
		 * 初始化JS动画
		 * @param {Object} 联动元素集合
		 * @param {Object} 目标元素
		 * @param {String} 选项类型 ["show", "hide", "normal", "all"]
		 */
		initJsAnimation: function(opElementObj, targetEl, type) {
			var conf = this.conf;
			var animationStr = ‘callout.bounce,callout.shake,callout.flash,callout.pulse,callout.swing,callout.tada,transition.fadeIn,transition.fadeOut,transition.flipXIn,transition.flipXOut,transition.flipYIn,transition.flipYOut,transition.flipBounceXIn,transition.flipBounceXOut,transition.flipBounceYIn,transition.flipBounceYOut,transition.swoopIn,transition.swoopOut,transition.whirlIn,transition.whirlOut,transition.shrinkIn,transition.shrinkOut,transition.expandIn,transition.expandOut,transition.bounceIn,transition.bounceOut,transition.bounceUpIn,transition.bounceUpOut,transition.bounceDownIn,transition.bounceDownOut,transition.bounceLeftIn,transition.bounceLeftOut,transition.bounceRightIn,transition.bounceRightOut,transition.slideUpIn,transition.slideUpOut,transition.slideDownIn,transition.slideDownOut,transition.slideLeftIn,transition.slideLeftOut,transition.slideRightIn,transition.slideRightOut,transition.slideUpBigIn,transition.slideUpBigOut,transition.slideDownBigIn,transition.slideDownBigOut,transition.slideLeftBigIn,transition.slideLeftBigOut,transition.slideRightBigIn,transition.slideRightBigOut,transition.perspectiveUpIn,transition.perspectiveUpOut,transition.perspectiveDownIn,transition.perspectiveDownOut,transition.perspectiveLeftIn,transition.perspectiveLeftOut,transition.perspectiveRightIn,transition.perspectiveRightOut‘;
			var animationArr = animationStr.split(‘,‘);
			var arr = [];
			$.merge(arr, animationArr, conf.cssAnimationExtra);
			arr = $.unique(arr);
			_initAnimation(arr, opElementObj, targetEl, type, ‘js‘);
		},
		/**
		 * 入场动画
		 * @param {Array} 出场队列
		 * @param {Array} 入场队列
		 * @param {Function} 入场完成回调
		 */
		show: function(beforeQuene, currentQuene, callback) {
			var self = this;
			self.hide(beforeQuene);
			currentQuene && self.run(currentQuene).then(function() {
				callback && callback();
			});
		},
		/**
		 * 出场动画
		 * @param {Array} 出场队列
		 * @param {Function} 出场完成回调
		 */
		hide: function(quene, callback) {
			var self = this;
			callback && callback();
			quene && self.run(quene);
		},
		/**
		 * 图片懒加载
		 * @param {Array} 图片列表
		 * @param {Function} 图片加载回调
		 */
		imgLoader: function(imgList, callback) {
			var count = imgList.length,
                i = 0,
                success = 0,
                failed = 0,
                failList = [];
			for ( ; i < count ; i++ ) {
				var img = new Image();
				(function(i){
					img.onload = function () {
						success++;
						if( (success + failed) == count ) {
							callback&&callback.call( imgList , failed, failList);
						}
					};
					img.onerror = function () {
						failed++;
						failList.push(imgList[i]);
						if( (success + failed) == count ) {
							callback&&callback.call( imgList , failed, failList );
						}
					};
					img.src = imgList[i];
				})(i);
			}
		},
		/**
		 * 注册自定义动画
		 */
		register: function() {
			var self = this;
			var args = [].slice.apply(arguments);
			$.Velocity.RegisterEffect.apply(self, args);
		},
		/**
		 * 封装velocity方法，统一管理队列和单个动画
		 * @return {Object} promise对象
		 */
		run: function() {
			var deferred = $.Deferred();
			var self = this;
			var args = [].slice.call(arguments);
			var len = args[0].length;

			if($.isArray(args[0])) {
				if(!args[0][len-1].options){
					args[0][len-1].options = {};
				}
				args[0][len-1].options.complete = function() {
					deferred.resolve();
				};
				$.Velocity.RunSequence.call(self, args[0]);
				return deferred.promise();
			}else {
				return $.Velocity.animate.apply(self, args);
			}

		},
		/**
		 * 启动CSS动画
		 * @param {Object} 操作元素
		 * @param {String} 初始class
		 * @param {String} css动画
		 * @param {Number} 动画时长
		 * @param {Number} 动画延迟
		 * @return {Object} promise对象
		 */
		cssAnimationRun: function(targetEl, className, animation, duration, delay, loop) {
			loop = (loop === true) ? 0 : loop;
			_cssRun(targetEl, className, animation, duration, delay, loop);
		},
		/**
		 * 启动JS动画
		 * @param {Object} 操作元素
		 * @param {String} css动画
		 * @param {Number} 动画时长
		 * @param {Number} 动画延迟
		 * @return {Object} promise对象
		 */
		jsAnimationRun: function(targetEl, animation, options) {
			var opts = {
				stagger: 200,
				drag: true
			};
			opts = $.extend(opts, options);
			if(animation) {
				this.run(targetEl, ‘stop‘);
				this.run(targetEl, animation, opts);
			}
		}
	});
});

　　

使用方式：

var ras = new Ras({
	cssAnimationExtra: [‘bounce‘],
	jsAnimationExtra: [‘callout.bounce‘]
});
ras.init();
//调用相关方法

　　

　　测试效果地址

附录（资源地址）：

<link rel="stylesheet"  href="http://s1.qhimg.com/!efd6dff2/animation.css">

<script src="http://s0.qhimg.com/lib/jquery/191.js" ></script>

<script src="http://s3.qhimg.com/!44713922/bluebird.js" ></script>
    <script src="http://s6.qhimg.com/!7c8590ec/jquery.mousewheel.min.js"></script>
    <script src="http://s3.qhimg.com/!20821230/velocity.min.js"></script>
    <script src="http://s5.qhimg.com/!d0b08d4d/velocity.ui.min.js"></script>

参考资料：

http://julian.com/research/velocity/

https://github.com/julianshapiro/velocity

http://www.infoq.com/cn/news/2014/05/jquery-velocity-js

时间： 2024-10-13 07:29:58

制作炫酷的专题页面的相关文章

使用velocity.js制作炫酷滚动效果页面

Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换 在动画方面的最佳组合. 课程链接:http://www.gbtags.com/gb/gbliblist/127.htm

如何制作炫酷的热力图

如何制作炫酷的热力图 来自:http://mp.weixin.qq.com/s/s85vBmTv1GdzozQMWjY6xA 2017-11-07 ArcGIS带你飞    飞言飞语  Attention  “热力图”是描述趋势变化强力武器,可以将报告内容瞬间提升一个档次,不过,制作“热力图”并不难,你只需掌握—— 核密度工具 工具简历 核密度分析 英文名:Kernel Density 地址:空间分析» 密度工具 » 核密度分析   作用:计算每个输出栅格像元周围的点要素的密度. 核密度分析可用

Web前端制作炫酷特效和动态icon

1.box-shadow属性除了常用于阴影效果.卡片等基础使用外,还可以用于实现比较炫酷的特效: 类似这样的想过都是可以通过box-shadow属性制作的:资料来源于CSDN:很小白的小白 附上他的代码, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q

制作炫酷banner js插件,revolution

这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件. <script src="js/jque

canvas，制作炫酷的时钟和倒计时

html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #a5b2b9 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4a8a01 } p.p

css3制作炫酷导航栏效果

今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单. (1)使用ul标签布局 (2)鼠标经过事件 <div id="demo1"> <ul> <li>Home</li> <li>Content</li> <li>Service</li> &l

css3制作炫酷导航栏效果 &lt;转&gt;

今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单. (1)使用ul标签布局 (2)鼠标经过事件 <div id="demo1"> <ul> <li>Home</li> <li>Content</li> <li>Service</li> &l

Android开发必知--WebView加载html5实现炫酷引导页面

大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动画网页方面比较给力,我们不妨先利用html5做出手机引导页面,然后将其嵌入APP中. 首先我们分析一下,都需要做哪些工作? 1.制作html5引导页面. 2.把做好的页面放入Android工程中assets文件夹下. 3.利用WebView加载asset文件夹下的html文件. 4.在引导页最后一页的按钮上捕捉点击事件,结束引导页,进入程序.

30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQurey代码只是用于隐藏加载动画.当你点击页面的任何一个地方时,loading动画就会被隐藏. 这30种loading动画分为3组:方形加载动画特效.圆形加载动画特效和长条形加载动画特效.每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码. 效果演示:http://www.htmleaf.com/Demo/201504151683.ht