实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 特效 - Easing 比较演示</title>
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style>
	body {
		font-size: 62.5%;
		font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
	}
	#tracks {
		margin: 0 150px;
	}
	#tracks div {
		border: 2px solid #eee;
		padding: 8px;
		height: 20px;
		margin: 14px;
		position: relative;
		font-size: 1.1em;
	}
	#tracks .box {
		padding: 5px;
		left: 5px;
		width: 10px;
		height: 10px;
		position: absolute;
		background: red;
		border-radius: 50%;
	}
	#tracks .label {
		padding-left: 24px;
		font-size: 1.1em;
		line-height: 20px;
	}
	</style>
<script>
	$(function() {
		function addEasing( easing ) {
			var box = $( "<span>" )
				.addClass( "box" )
				.data( "easing", easing );
			var label = $( "<span>" )
				.addClass( "label" )
				.text( easing );
			$( "<div>")
				.append( box )
				.append( label )
				.appendTo( tracks );
		}

var addForm = $( "#add-easing" ),
			addSelect = addForm.find( "select" ),
			tracks = $( "#tracks" ),
			startButton = $( "#start-race" );

$.each( $.easing, function( name ) {
			$( "<option>" ).text( name ).appendTo( addSelect );
		});
		addSelect.change(function() {
			addEasing( this.value );
		});

addForm.submit(function( event ) {
			event.preventDefault();
			addEasing( addSelect.val() );
		});

tracks.on( "click", "div", function() {
			$( this ).remove();
		});

startButton.click(function() {
			tracks.find( "span" ).each(function() {
				var car = $( this );
				car
					.stop( true, true )
					.css({
						left: 5
					})
					.animate({
						left: tracks.width() - car.width() - 50
					}, 2500, car.data( "easing" ) )
					.delay( 300 )
					.animate({
						left: 5
					}, 2500, car.data( "easing" ) );
			});
		});

addEasing( "linear" );
		addEasing( "swing" );
		addEasing( "easeOutBounce" );
	});
	</script>
</head>
<body>
<div id="add-easing">
请在这里选择一个 easing，点击下面的轨道进行移除
<select></select>
</div>
<div id="tracks">
</div>
<button id="start-race">开始比赛</button>
<div class="demo-description">
<p></p>
</div>
</body>
</html>

​x
 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 特效 - Easing 比较演示</title>
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style>
    body {
        font-size: 62.5%;
        font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
    }
    #tracks {
        margin: 0 150px;
    }
    #tracks div {
        border: 2px solid #eee;
        padding: 8px;
        height: 20px;
        margin: 14px;
        position: relative;