jQuery實現小球彈動歸位特效



29 113 38



特效描述:jQuery實現 小球彈動 歸位特效,jQuery實現小球彈動歸位特效

代碼結構

1. 引入CSS

<link rel='stylesheet' href='css/style.css'>

2. 引入JS

<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>

3. HTML代碼

	<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>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動星星打分 其他 css繪制樣式 多功能 多功能插件
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子