jquery插件開(kāi)發(fā)之實(shí)現(xiàn)jquery手風(fēng)琴功能分享
可用于圖片或者容器,使用與常規(guī)jQuery插件調(diào)用方式無(wú)異。實(shí)現(xiàn)原理也不難理解,都在代碼注釋中。想研究的可以看下面的代碼,或者樣例演示。
;(function($){
/*
* 基于jQuery的簡(jiǎn)易手風(fēng)琴切換插件
*/
$.fn.iAccordion=function(iSet){
var self=this;
iSet=$.extend({Type:'mouseover',Select:'img',Cur:0,InitInterval:100,Interval:500,Easing:''},iSet||{});
/*
* Type: 鼠標(biāo)事件類(lèi)型,mouseover,click,mouseleave等
* Select: 選擇器,用以獲取需要切換的元素集合
* Cur: 默認(rèn)展開(kāi)元素的索引
* InitInterval: 初始化手風(fēng)琴效果動(dòng)畫(huà)間隔時(shí)間
* Interval: 鼠標(biāo)事件動(dòng)畫(huà)間隔時(shí)間
* Easing: 動(dòng)畫(huà)效果,需要jQuery.easing支持,參數(shù)可參考jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/
*/
var item,boxW,selectW,animateW,sIndex,animateL;
$(self).each(function(){
//初始化容器樣式
$(this).css({'position':'relative','overflow':'hidden'});
item=$(this).find(iSet.Select);
//初始化切換元素樣式
item.css({'position':'absolute','left':0,'top':0});
boxW=$(this).outerWidth();
selectW=item.outerWidth();
animateW=(boxW-selectW)/(item.size()-1);
//初始化元素排列并為元素data一個(gè)索引值
item.each(function(i){
$(this).animate({'left':animateW*i+'px'},iSet.InitInterval,iSet.Easing);
$(this).data('index',i);
}).on(iSet.Type,function(e){//綁定鼠標(biāo)事件
//獲取當(dāng)前元素索引值
sIndex=$(this).data('index');
//鼠標(biāo)事件動(dòng)畫(huà),通過(guò)判斷元素索引值與當(dāng)前元素索引值的大小關(guān)系動(dòng)畫(huà)顯示當(dāng)前元素并動(dòng)畫(huà)排列
item.each(function(n){
n > sIndex ? animateL=selectW+animateW*(n-1) : animateL=animateW*n;
$(this).stop().animate({'left':animateL+'px'},iSet.Interval,iSet.Easing);
});
}).eq(iSet.Cur).trigger(iSet.Type);
});
}
})(jQuery);
如何調(diào)用?
1、在頁(yè)面中引入上面的插件代碼;
2、$(selectmain).iAccordion({…});
3、相關(guān)參數(shù)及功能,請(qǐng)參考插件中的注釋說(shuō)明。
小小的提示,若需要定義Easing,需要導(dǎo)入jQuery.easing插件 ,Easing的參數(shù)即jQuery.easing的方法名稱(chēng),如easeOutBounce、easeOutQuint等。
- 跟我一起學(xué)寫(xiě)jQuery插件開(kāi)發(fā)方法(附完整實(shí)例及下載)
- 基于Jquery插件開(kāi)發(fā)之圖片放大鏡效果(仿淘寶)
- jquery插件開(kāi)發(fā)方法(初學(xué)者)
- 跟我一起學(xué)JQuery插件開(kāi)發(fā)
- 學(xué)習(xí)從實(shí)踐開(kāi)始之jQuery插件開(kāi)發(fā) 對(duì)話(huà)框插件開(kāi)發(fā)
- 學(xué)習(xí)從實(shí)踐開(kāi)始之jQuery插件開(kāi)發(fā) 菜單插件開(kāi)發(fā)
- jQuery插件開(kāi)發(fā)全解析
- jQuery插件開(kāi)發(fā)基礎(chǔ)簡(jiǎn)單介紹
- jquery插件開(kāi)發(fā)注意事項(xiàng)小結(jié)
- JQuery插件開(kāi)發(fā)示例代碼
- 詳解jQuery插件開(kāi)發(fā)中的extend方法
- jQuery插件開(kāi)發(fā)的兩種方法及$.fn.extend的詳解
- jquery插件開(kāi)發(fā)之實(shí)現(xiàn)google+圈子選擇功能
- jquery插件開(kāi)發(fā)之實(shí)現(xiàn)md5插件
- jQuery插件開(kāi)發(fā)詳細(xì)教程
- jQuery插件開(kāi)發(fā)的五種形態(tài)小結(jié)
- jQuery插件開(kāi)發(fā)精品教程(讓你的jQuery更上一個(gè)臺(tái)階)
相關(guān)文章
JQuery獲取或設(shè)置ckeditor的數(shù)據(jù)(示例代碼)
JQuery獲取或設(shè)置ckeditor的數(shù)據(jù)(示例代碼)。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11jQuery簡(jiǎn)單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法,涉及jQuery的ajax調(diào)用及頁(yè)面樣式操作技巧,需要的朋友可以參考下2016-03-03JQuery 學(xué)習(xí)筆記 element屬性控制
JQuery元素屬性控制2009-07-07用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤(pán)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤(pán)抽獎(jiǎng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery實(shí)現(xiàn)鼠標(biāo)劃過(guò)修改樣式的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)劃過(guò)修改樣式的方法,涉及jQuery針對(duì)鼠標(biāo)事件及樣式操作的技巧,是jQuery鼠標(biāo)事件的典型應(yīng)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04