jQuery版仿Path菜單效果
更新時間：2011年12月15日 00:13:11 作者：
昨日在一個前端網(wǎng)站上看見了一個老外寫的純用css3做的仿Path菜單，心里癢癢，于是也用jQuery寫了一個，現(xiàn)在分享給大家
使用方法:
1.依次引用jquery.1.7.1,jQueryRotateCompressed.2.1.js(旋轉(zhuǎn)插件),jquery.path.1.0.js(我自己寫的Path插件)
2.頁面元素采用如下格式
<div id="content">
<div>單擊我</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
最外層為父級包裹div，內(nèi)部第一個div為需要單擊元素，剩余的是Path菜單元素
3.只需一小段代碼
$(document).ready(function (){
$('#content').path({
radius: 100, //半徑
radian: 90, //弧度
duration: 200//動畫時間
});
});
4.enjoy yourself!
附
插件下載
jQueryRotateCompressed.2.1.js(旋轉(zhuǎn)插件)
jquery.path.1.0.js(Path插件)
腳本之家打包下載
1.依次引用jquery.1.7.1,jQueryRotateCompressed.2.1.js(旋轉(zhuǎn)插件),jquery.path.1.0.js(我自己寫的Path插件)
2.頁面元素采用如下格式
復(fù)制代碼 代碼如下:
<div id="content">
<div>單擊我</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
最外層為父級包裹div，內(nèi)部第一個div為需要單擊元素，剩余的是Path菜單元素
3.只需一小段代碼
復(fù)制代碼 代碼如下:
$(document).ready(function (){
$('#content').path({
radius: 100, //半徑
radian: 90, //弧度
duration: 200//動畫時間
});
});
4.enjoy yourself!
附
插件下載
jQueryRotateCompressed.2.1.js(旋轉(zhuǎn)插件)
jquery.path.1.0.js(Path插件)
腳本之家打包下載
相關(guān)文章
頁面分頁對于程序員來說最熟悉不過，在WEB開發(fā)中經(jīng)常需要對頁面進行分頁，jQuery插件JQuery Pager分頁器能輕松實現(xiàn)javascript分頁功能，只需要幾行代碼，javascript分頁簡單搞定。2010-07-07
本文主要介紹jQuery插件uploadify3.1的簡單使用，希望能幫到大家，有需要的朋友可以參考一下。2016-06-06
jquery 升級到1.4后 jqDrag 拖動 不可用的修改方法2010-02-02
這篇文章主要為大家詳細介紹了jQuery制作網(wǎng)頁版選項卡的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
jQuery Form插件使用詳解_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細介紹了jQuery Form插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個比較不錯的選擇。具體實現(xiàn)工程大家參考下本文2018-01-01
這篇文章主要介紹了jquery實現(xiàn)帶二級菜單的導(dǎo)航示例,需要的朋友可以參考下2014-04-04
Jquery each方法跳出循環(huán),并獲取返回值(實例講解)
這篇文章主要是對Jquery each方法跳出循環(huán),并獲取返回值進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了基于jquery編寫分頁插件的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-03-03
萬年歷，想必大家對它都不陌生吧，下面是使用jquery寫的一個萬年歷示例，喜歡的朋友可以參考下2014-01-01