jQuery沿贝兹曲线和弧线运动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery沿贝兹曲线和弧线运动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery沿贝兹曲线和弧线运动特效</title>
<link type="text/css" rel="stylesheet" media="screen" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/default.css">
<style>
.page{width: 800px;margin:0 auto;}
#arc { position: relative; width: 600px; height: 300px; }
#bezier { position: relative; width: 600px; height: 300px; }
#sine { position: relative; width: 600px; height: 300px; }
.pixel { position: absolute; width: 150px; height: 150px; background: red; -moz-border-radius: 75px; -webkit-border-radius: 75px; opacity: 0.5; filter: alpha(opacity=50); top: -15px; left: 185px;}
.dot {width: 1px; position: absolute; height: 1px; background: #aaa; }
a {  cursor: pointer;}
</style>
</head>
<body>
<div class="page">
	<h2>10条曲线</h2>
	<div id="arc">
	  <p><a class="start">开始动画</a> </p>
	  <p><a class="plot">Plot</a>  </p>
	</div>

	<h2>10条贝兹曲线</h2>
	<div id="bezier">
	  <p><a class="start">开始动画</a> </p>
	  <p><a class="plot">Plot</a>  </p>
	</div>
	
	<h2>自定义路径：正弦波</h2>
	<div id="sine">
	  <p><a class="start">开始动画</a> </p>
	  <p><a class="plot">Plot</a>  </p>
	</div>
	
  </div>

<script src="js/jquery.min-1.7.2.js" type="text/javascript"></script>
<script src='js/jquery.path.js'></script>
<script>
	var SineWave = function() {
	  this.css = function(p) {
		var s = Math.sin(p*20)
		var x = 500 - p * 300 
		var y = s * 50 + 150
		var o = ((s+2)/4+0.1)
		return {top: y + "px", left: x + "px", opacity: o}
	  } 
	};


	$().ready(function() {
	  

	  var Paths = {"arc":[], "bezier":[], "sine": []}
	  
	  var path_fns = {
		arc: function(i) {
		  return new $.path.arc({
			center: [285,185],	
				radius: 100,	
				start: -i*20,
				end: i*100,
				dir: (i%2) ? 1 : -1
		  })
		},
		bezier: function(i) {
		  var x = i%2 ? 1 : -1
		  return new $.path.bezier({
			start: { x:185, y:185, angle: i*20 * x},	
			end: {x:540,y:110, angle: i*10, length: i / 4.0}
		  })
		},
		sine : function() {
		  return new SineWave
		}
	  }
	  
	  for(var type in Paths) {

		for(var i=0; i<10; i++ ) {
		  if(type == "sine" && i != 9)
			continue
			
		  var path = path_fns[type](i)
		  Paths[type].push(path)

		  var css = {
			"backgroundColor": (i%2) ? "red" : "yellow", 
			width: 20*(1+i), 
			height: 20*(1+i), 
			"-moz-border-radius": 10*(1+i), 
			"-webkit-border-radius": 10*(1+i), 
			marginLeft: -10*(1+i), // offset the div, so center is at origin
			marginTop: -10*(1+i) 
		  }

		  var $$ = $("<span class=pixel></span>").css(css)

		  // initialize to start
		  $$.css(path.css(1))
		  $("#" + type).append($$)
		}
			
	  }

	  
	  
	  $(".start").click(function() {
		var i =0;
		var type = $(this).closest("div").attr("id")
		
		$("#" + type + " .pixel").each(function() {
		  $(this).stop().animate({path: Paths[type][i] }, 3000)
		  i++;
		})
	  })
	  
	  
	  $(".plot").click(function() {

		var $$ = $("<div>")
		var type = $(this).closest("div").attr("id")
		
		for(var t=0; t<1;t+= 0.01) {    
		  for(var i in Paths[type]) {
			var d = $("<span class=dot></span>").css(Paths[type][i].css(t))
			$$.append(d)
		  }
		}
		$("#" + type ).append($$) 
	  })
	})
</script>
</body>
</html>

JS代码(jquery.path.js):

/* * jQuery css bezier animation support -- Jonah Fox * version 0.0.1 * Released under the MIT license. */
/* var path = $.path.bezier({
	start:{
	x:10,y:10,angle:20,length:0.3}
,end:{
	x:20,y:30,angle:-20,length:0.2}
}
) $("myobj").animate({
	path:path}
,duration)*/
;
	(function($){
	$.path ={
}
;
	var V ={
	rotate:function(p,degrees){
	var radians = degrees * Math.PI / 180,c = Math.cos(radians),s = Math.sin(radians);
	return [c*p[0] - s*p[1],s*p[0] + c*p[1]];
}
,scale:function(p,n){
	return [n*p[0],n*p[1]];
}
,add:function(a,b){
	return [a[0]+b[0],a[1]+b[1]];
}
,minus:function(a,b){
	return [a[0]-b[0],a[1]-b[1]];
}
}
;
	$.path.bezier = function( params,rotate ){
	params.start = $.extend({
	angle:0,length:0.3333}
,params.start );
	params.end = $.extend({
	angle:0,length:0.3333}
,params.end );
	this.p1 = [params.start.x,params.start.y];
	this.p4 = [params.end.x,params.end.y];
	var v14 = V.minus( this.p4,this.p1 ),v12 = V.scale( v14,params.start.length ),v41 = V.scale( v14,-1 ),v43 = V.scale( v41,params.end.length );
	v12 = V.rotate( v12,params.start.angle );
	this.p2 = V.add( this.p1,v12 );
	v43 = V.rotate(v43,params.end.angle );
	this.p3 = V.add( this.p4,v43 );
	this.f1 = function(t){
	return (t*t*t);
}
;
	this.f2 = function(t){
	return (3*t*t*(1-t));
}
;
	this.f3 = function(t){
	return (3*t*(1-t)*(1-t));
}
;
	this.f4 = function(t){
	return ((1-t)*(1-t)*(1-t));
}
;
	/* p from 0 to 1 */
 this.css = function(p){
	var f1 = this.f1(p),f2 = this.f2(p),f3 = this.f3(p),f4=this.f4(p),css ={
}
;
	if (rotate){
	css.prevX = this.x;
	css.prevY = this.y;
}
css.x = this.x = ( this.p1[0]*f1 + this.p2[0]*f2 +this.p3[0]*f3 + this.p4[0]*f4 +.5 )|0;
	css.y = this.y = ( this.p1[1]*f1 + this.p2[1]*f2 +this.p3[1]*f3 + this.p4[1]*f4 +.5 )|0;
	css.left = css.x + "px";
	css.top = css.y + "px";
	return css;
}
;
}
;
	$.path.arc = function(params,rotate){
	for ( var i in params ){
	this[i] = params[i];
}
this.dir = this.dir || 1;
	while ( this.start > this.end && this.dir > 0 ){
	this.start -= 360;
}
while ( this.start < this.end && this.dir < 0 ){
	this.start += 360;
}
this.css = function(p){
	var a = ( this.start * (p ) + this.end * (1-(p )) ) * Math.PI / 180,css ={
}
;
	if (rotate){
	css.prevX = this.x;
	css.prevY = this.y;
}
css.x = this.x = ( Math.sin(a) * this.radius + this.center[0] +.5 )|0;
	css.y = this.y = ( Math.cos(a) * this.radius + this.center[1] +.5 )|0;
	css.left = css.x + "px";
	css.top = css.y + "px";
	return css;
}
;
}
;
	$.fx.step.path = function(fx){
	var css = fx.end.css( 1 - fx.pos );
	if ( css.prevX != null ){
	$.cssHooks.transform.set( fx.elem,"rotate(" + Math.atan2(css.prevY - css.y,css.prevX - css.x) + ")" );
}
fx.elem.style.top = css.top;
	fx.elem.style.left = css.left;
}
;
}
)(jQuery);

CSS代码(style.css):

/*Copyright (c) 2008,Yahoo! Inc. All rights reserved.Code licensed under the BSD License:http://developer.yahoo.net/yui/license.txtversion:3.0.0pr2*/
/* reset */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
/* fonts */
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
/* **************** TEMPLATE ***************** */
/* ====== Page Head,Body,and Foot ====== */
body{_text-align:center;}
/* IE5.5 */
.body{overflow:hidden;_overflow:visible;_zoom:1;}
.page,#container{margin:0 auto;width:600px;_text-align:left;}
/* wraps other template elems to set width */
 /* text-align IE5.5 */
/* "old school" and "liquid" extend page to allow for different page widths */
.oldSchool{width:480px;}
.gs960{width:610px;}
.liquid{extends:.page;width:auto;margin:0;}
/* ====== Columns ====== */
.main{overflow:hidden;_overflow:visible;_zoom:1;}
.leftCol{float:left;width:250px;_margin-right:-3px;}
.rightCol{float:right;width:300px;_margin-left:-3px;}
/* extend columns to allow for common column widths */
.gMail{width:160px;}
.gCal{width:180px;}
.yahoo{width:240px;}
.myYahoo{width:300px;}
html{background-color:#111;}
body{font-family:"Myriad Pro","Segoe UI",Helvetica,Arial,sans-serif;color:#CCC;font-size:larger;background-color:#111;}
/* **************** CONTENT OBJECTS ***************** */
/* ====== Default spacing ====== */
h1,h2,h3,h4,h5,h6,ul,ol,dl,p,blockquote{padding:10px;}
h1,h2,h3,h4,h5,h6,img{padding-bottom:0px;}
pre{margin:10px;}
table h1,table h2,table h3,table h4,table h5,table h6,table p,table ul,table ol,table dl,ul h1,ul h2,ul h3,ul h4,ul h5,ul h6,ul p,ul ul,ul ol,ul dl,ol h1,ol h2,ol h3,ol h4,ol h5,ol h6,ol p,ol ul,ol ol,ol dl{padding:0;}
/* ====== Elements ====== */
img{display:block;}
em{font-style:italic;}
strong{font-weight:bold;}
hr{border:5px solid #e2e2e2;border-width:0 0 5px 0;margin:20px 10px 10px 10px;}
code{color:#AEEE00;/*display:block;overflow:auto;*/
}
/* ====== Headings ====== */
/* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
h1,.h1{font-size:196%;font-weight:normal;font-style:normal;color:#FF358B;text-transform:lowercase;}
h2,.h2{font-size:167%;font-weight:normal;font-style:normal;color:#FF358B;text-transform:lowercase;}
h3,.h3{font-size:120%;font-weight:normal;font-style:normal;color:#FF358B;text-transform:lowercase;}
h4,.h4{font-size:123.1%;font-weight:normal;font-style:normal;color:#FF358B;text-transform:lowercase;}
h5,.h5{font-size:108%;font-weight:bold;font-style:normal;color:#FF358B;text-transform:lowercase;}
h6,.h6{font-size:108%;font-weight:normal;font-style:italic;color:#FF358B;text-transform:lowercase;}
/* if additional headings are needed they should be created via additional classes,never via location dependant styling */
.category{font-size:108%;font-weight:normal;font-style:normal;text-transform:uppercase;color:#333;}
.category a{color:#333;}
.important a{font-weight:bold;}
/* links */
a{color:#01B0F0;text-decoration:none}
a:focus,a:hover{text-decoration:underline}
a:visited{color:#005a9c;}
/* ====== Lists ======*/
/* numbered list */
ol.simpleList li{list-style-type:decimal;margin-left:40px;}
/* standard list */
ul.simpleList li{list-style-type:disc;margin-left:40px;}
/* ====== Tables ====== */
.data{padding:20px;position:relative;zoom:1;vertical-align:top;border-right:solid 1pxtransparent;/* border fixes a FF2 bug which causes the data table to overlay its borders*/
}
.data table{width:100%;border:1px solid #AE0345;}
th,td{vertical-align:top;border:1px solid #AE0345;}
.txtC,.data .txtC td,.data .txtC th{text-align:center;}
.txtL,.data .txtL td,.data .txtL th{text-align:left;}
.txtR,.data .txtR td,.data .txtR th{text-align:right;}
.txtT,.data .txtT td,.data .txtT th{vertical-align:top;}
.txtB,.data .txtB td,.data .txtB th{vertical-align:bottom;}
.txtM,.data .txtM td,.data .txtM th{vertical-align:middle;}
.data th,.data td{padding:3px 20px}
.data thead tr{background-color:#fff0f8;}
.data th{color:#000;font-weight:bold}
/* specification table - extends data table */
.spec{padding:10px;}
.spec table{border-top:1px solid #e2e2e2;border-bottom-color:#fff;border-left:none;border-right:none;}
.spec th,.spec td{border:1px solid #e2e2e2;border-width:1px 0;padding-left:0;}
.spec .odd,.spec .even{background-color:#fff;}
/* ====== blockquote ====== */
cite{display:block;text-align:right;padding-top:10px;}
/* ====== callout ====== */
.callout{font-size:189%;color:#999999;font-style:italic;}
.callout cite{display:block;text-align:right;padding-top:30px;font-size:69.25%;}
.callout span.quot{font-size:500%;vertical-align:sub;color:#e2e2e2;line-height:25px;font-weight:bold;}
.callout span.quotLast{vertical-align:middle;}
/* ====== image treatments (get more from jason santa maria) ====== */
.caption{font-size:13px;color:#666666;font-style:italic;padding-top:0;}
/* will need to either1. find a way to capture the width of the caption in the width of the image or flash2. Set some default widths,mby use flickr widths?*/
.main ul li{list-style-type:disc;list-style-position:outside;margin-left:20px;}
.main ol li{list-style-type:decimal;list-style-position:outside;margin-left:20px;}
.rightCol ul li{text-transform:lowercase;}
.description{font-size:1.2em;margin-bottom:30px;margin-top:30px;font-style:italic;padding:10px;}
.download{float:right;}
pre{background:#000;color:#fff;padding:15px;}
hr{border:0;width:80%;border-bottom:1px solid #aaa}
.footer{text-align:center;padding-top:30px;font-style:italic;}

附件:下载该文件资源,减少时间成本(增值服务)