hf/Scripts/jquery-ui-1.8.12.custom/development-bundle/demos/effect/easing.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - Easing demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.5.1.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.graph {
		float: left;
		margin-left: 10px;
	}
	</style>
	<script>
	$(function() {
		if ( !$( "<canvas/>" )[0].getContext ) {
			$( "<div/>" ).text(
				"Your browser doesn't support canvas, which is required for this demo. " +
				"Give Firefox 3 a try!"
			).appendTo( "#graphs" );
			return;
		}

		var i = 0,
			width = 100,
			height = 100;
		$.each( $.easing, function( name, impl ) {
			// skip linear/jswing and any non functioning implementation
			if ( !$.isFunction( impl ) || /jswing/.test( name ) ) {
				return;
			}
			var graph = $( "<div/>" ).addClass( "graph" ).appendTo( "#graphs" ),
				text = $( "<div/>" ).text( ++i + ". " + name ).appendTo( graph ),
				wrap = $( "<div/>" ).appendTo( graph ).css( 'overflow', 'hidden' ),
				canvas = $( "<canvas/>" ).appendTo( wrap )[ 0 ];
			canvas.width = width;
			canvas.height = height;
			var drawHeight = height * 0.8,
				cradius = 10;
				ctx = canvas.getContext( "2d" );
			ctx.fillStyle = "black";

			ctx.beginPath();
			ctx.moveTo( cradius, 0 );
			ctx.quadraticCurveTo( 0, 0, 0, cradius );
			ctx.lineTo( 0, height - cradius );
			ctx.quadraticCurveTo( 0, height, cradius, height );
			ctx.lineTo( width - cradius, height );
			ctx.quadraticCurveTo( width, height, width, height - cradius );
			ctx.lineTo( width, 0 );
			ctx.lineTo( cradius, 0 );
			ctx.fill();

			ctx.strokeStyle = "#555";
			ctx.beginPath();
			ctx.moveTo( width * 0.1, drawHeight + .5 );
			ctx.lineTo( width * 0.9, drawHeight + .5 );
			ctx.stroke();