jQuery小球弹动归位

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

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

以下是 jQuery小球弹动归位的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):


<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery小球弹动归位</title>
	<link rel='stylesheet' href='css/style.css'>
	
    <script src='js/jquery.min.js'></script>
    <script src='js/jquery.easing.1.2.js'></script>
    <script src='js/jquery.circulate.js'></script>
    <script src='js/example.js'></script>
</head>

<body>


	<div id="page-wrap">
	
	   
	    <div class="top-demo group">
		    <div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
		</div>
				
		<h2>Prereqs</h2>
      
        <p>Requires the jQuery Library as well as the Easing plugin.</p>
      
<pre>&lt;script type=&#39;text/javascript&#39; src=&#39;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&#39;&gt;&lt;/script&gt;
&lt;script type=&#39;text/javascript&#39; src=&#39;js/jquery.easing.1.2.js&#39;&gt;&lt;/script&gt;
&lt;script type=&#39;text/javascript&#39; src=&#39;js/jquery.circulate.js&#39;&gt;&lt;/script&gt;</pre>
		
		<h2>Usage / Options / Defaults</h2>
		
		<pre>$(&quot;#anything).circulate({

    speed: 400,                  // Speed of each quarter segment of animation, 1000 = 1 second
    height: 200,                 // Distance vertically to travel
    width: 200,                  // Distance horizontally to travel
    sizeAdjustment: 100,         // Percentage to grow or shrink
    loop: false,                 // Circulate continuously
    zIndexValues: [1, 1, 1, 1]   // Sets z-index value at each stop of animation

});</pre>

	</div>
</body>
</html>

JS代码(example.js):

$(window).load(function(){
	$(".top-demo div").each(function(){
	$(this).circulate({
	speed:Math.floor(Math.random()*300) + 100,height:Math.floor(Math.random()*1000) - 470,width:Math.floor(Math.random()*1000) - 470}
);
}
).click(function(){
	$(this).circulate({
	speed:Math.floor(Math.random()*300) + 100,height:Math.floor(Math.random()*1000) - 470,width:Math.floor(Math.random()*1000) - 470}
);
}
);
	$("#recurssive-button").click(function(){
	if ($(this).text() == "Start"){
	$("#text-demo span").circulate({
	loop:true,width:150,height:10}
);
	$(this).text("Stop");
}
else{
	$("#text-demo span").circulate("Stop");
	$(this).text("Start");
}
}
);
	$("#unicorn").css("left",$("#unicorn").position().left).circulate({
	sizeAdjustment:160,speed:2000,width:-820,height:50,loop:true,zIndexValues:[1,50,50,1]}
);
	function startBallOne(){
	$("#orange-ball").circulate({
	speed:4000,height:100,width:-700,sizeAdjustment:40,loop:true,zIndexValues:[1,1,3,3]}
);
}
function startBallTwo(){
	$("#blue-ball").circulate({
	speed:4000,height:120,width:-700,sizeAdjustment:35,loop:true,zIndexValues:[2,2,2,2]}
)}
function startBallThree(){
	$("#green-ball").circulate({
	speed:4000,height:140,width:-700,sizeAdjustment:30,loop:true,zIndexValues:[3,3,1,1]}
).fadeIn();
}
startBallOne();
	setTimeout(startBallTwo,2000);
	setTimeout(startBallThree,4000);
}
);

CSS代码(style.css):

/* Circulate jQuery Plugin by Chris Coyier http://css-tricks.com*/
*{margin:0;padding:0;}
body{font:14px Georgia,serif;background:#ccc;}
#page-wrap{z-index:20;width:570px;margin:70px auto;background:white;padding:20px;position:relative;}
.group:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.group{display:inline-block;}
/* start commented backslash hack \*/
* html .group{height:1%;}
.group{display:block;}
/* close commented backslash hack */
h1,h2{font-weight:normal;margin:30px 0 10px 0;}
p{margin:0 0 10px 0;}
pre{overflow:auto;padding:10px;background:#eee;margin:0 0 10px 0;}
.top-demo div{background:#ccc;width:80px;height:80px;float:left;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px;}
.top-demo div:nth-child(5n){background:#FF9900;}
.top-demo div:nth-child(5n+1){background:#424242;}
.top-demo div:nth-child(5n+2){background:#E9E9E9;}
.top-demo div:nth-child(5n+3){background:#BCBCBC;}
.top-demo div:nth-child(5n+4){background:#3299BB;}
#sphere-area{height:350px;position:relative;width:100%;}
#sphere-area img{width:150px;height:150px;position:absolute;top:50px;left:250px;}
#sphere-area #blue-ball{opacity:0;}
#sphere-area #green-ball{opacity:0;}
#unicorn{z-index:60;position:absolute;top:150px;left:44%;width:110px;display:block;}
#text-demo span{float:left;font:30px bold Helvetica,Sans-Serif;}

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