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