jQuery插件kinMaxShow擴(kuò)展效果用法實(shí)例
本文實(shí)例講述了jQuery插件kinMaxShow擴(kuò)展效果用法。分享給大家供大家參考。具體分析如下:
支付寶首頁(yè)的焦點(diǎn)圖就是用的kinMaxShow 擴(kuò)展效果(前段時(shí)間支付寶使用的,不知道現(xiàn)在還是不是這種,另外支付寶的這個(gè)焦點(diǎn)圖動(dòng)畫效果是分瀏覽器的,IE8及以下瀏覽器無(wú)動(dòng)畫純靜態(tài),只是在谷歌、火狐等現(xiàn)代瀏覽器才會(huì)出現(xiàn)動(dòng)畫。) 這只是kinMaxShow擴(kuò)展的一個(gè)小例子,更多效果你可以自己發(fā)揮。 代碼如下:
javascript 代碼:
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/jquery.kinMaxShow-1.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#kinMaxShow").kinMaxShow({ //設(shè)置焦點(diǎn)圖高度(單位:像素) 必須設(shè)置 否則使用默認(rèn)值 500 height:400, //設(shè)置焦點(diǎn)圖 按鈕效果 button:{ //設(shè)置按鈕上面不顯示數(shù)字索引(默認(rèn)也是不顯示索引) showIndex:false, //按鈕常規(guī)下 樣式設(shè)置 ,css寫法, //類似jQuery的 $('xxx').css({key:value,……})中css寫法。 //【友情提示:可以設(shè)置透明度哦 不用區(qū)分瀏覽器 //統(tǒng)一為 opacity,CSS3屬性也支持哦 //如:設(shè)置按鈕圓角、投影等,只不過(guò)IE8及以下不支持】 normal:{background:'url(images/button.png) no-repeat -14px 0', marginRight:'8px',border:'0',right:'44%',bottom:'20px'}, //當(dāng)前焦點(diǎn)圖按鈕樣式 設(shè)置,寫法同上 focus:{background:'url(images/button.png) no-repeat 0 0', border:'0' } }, //焦點(diǎn)圖切換回調(diào),每張圖片淡入、淡出都會(huì)調(diào)用。 //并且傳入2個(gè)參數(shù)(index,action)。 //index 當(dāng)前圖片索引 0為第一張圖片, //action 切入 或是 切出 值:fadeIn或fadeOut //函數(shù)內(nèi) this指向 當(dāng)前圖片容器對(duì)象 可用來(lái)操作里面元素。 //本例中的焦點(diǎn)圖動(dòng)畫主要就是靠callback實(shí)現(xiàn)的。 callback:function(index,action){ switch(index){ case 0 : if(action=='fadeIn'){ $(this).find('.sub_1_1').animate({left:'70px'},600) $(this).find('.sub_1_2').animate({top:'60px'},600) }else{ $(this).find('.sub_1_1').animate({left:'110px'},600) $(this).find('.sub_1_2').animate({top:'120px'},600) }; break; case 1 : if(action=='fadeIn'){ $(this).find('.sub_2_1').animate({left:'-100px'},600) $(this).find('.sub_2_2').animate({top:'60px'},600) }else{ $(this).find('.sub_2_1').animate({left:'-160px'},600) $(this).find('.sub_2_2').animate({top:'20px'},600) }; break; case 2 : if(action=='fadeIn'){ $(this).find('.sub_3_1').animate({right:'350px'},600) $(this).find('.sub_3_2').animate({left:'180px'},600) }else{ $(this).find('.sub_3_1').animate({right:'180px'},600) $(this).find('.sub_3_2').animate({left:'30px'},600) }; break; } } }); }); </script>
HTML 代碼:
<div id="kinMaxShow"> <div> <!--這是焦點(diǎn)圖大圖圖片,下面為動(dòng)畫元素所需圖片--> <img src="images/demo_extend_images/1.jpg" /> <!--如果需要附加內(nèi)容在焦點(diǎn)圖內(nèi)部 需要用一個(gè)div包裹起來(lái), 如下面標(biāo)紅div所示,否則kinMaxShow會(huì)解析混亂--> <div> <img class="sub_1_1" src="images/demo_extend_images/sub_1_1.png"/> <img class="sub_1_2" src="images/demo_extend_images/sub_1_2.png" usemap="#Map_1_2" border="0" /> <!--此處焦點(diǎn)圖上面的局部鏈接 可不用圖片熱區(qū)鏈接, 可用普通a鏈接實(shí)現(xiàn),偷個(gè)懶 (: --> <map name="Map_1_2" id="Map_1_2"> <area shape="rect" coords="2,96,106,123" href="http://www.dbjr.com.cn" target="_blank"/> </map> </div> </div> <div> <img src="images/demo_extend_images/2.jpg" /> <div> <img class="sub_2_1" src="images/demo_extend_images/sub_2_1.png"/> <img class="sub_2_2" src="images/demo_extend_images/sub_2_2.png" usemap="#Map_2_2" border="0" /> <map name="Map_2_2" id="Map_2_2"> <area shape="rect" coords="3,97,104,124" href="http://www.dbjr.com.cn" target="_blank"/> </map> </div> </div> <div> <img src="images/demo_extend_images/3.jpg" /> <div> <img class="sub_3_1" src="images/demo_extend_images/sub_3_1.png"/> <img class="sub_3_2" src="images/demo_extend_images/sub_3_2.png" usemap="#Map_3_2" border="0" /> <map name="Map_3_2" id="Map_3_2"> <area shape="rect" coords="1,98,106,124" href="http://www.dbjr.com.cn" target="_blank"/> </map> </div> </div> </div>
CSS樣式:
<style type="text/css"> #kinMaxShow{display:none;} #kinMaxShow .sub_1_1{ display:block; position:absolute;left:110px; top:136px; } #kinMaxShow .sub_1_2{ display:block; position:absolute;left:110px; top:120px; } #kinMaxShow .sub_2_1{ display:block; position:absolute;left:-160px; bottom:0px; } #kinMaxShow .sub_2_2{ display:block; position:absolute;left:110px; top:20px; } #kinMaxShow .sub_3_1{ display:block; position:absolute;right:180px; bottom:0px; } #kinMaxShow .sub_3_2{ display:block; position:absolute;left:30px; top:40px; } </style>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery插件擴(kuò)展實(shí)例【添加回調(diào)函數(shù)】
- jQuery插件擴(kuò)展extend的簡(jiǎn)單實(shí)現(xiàn)原理
- jQuery插件擴(kuò)展測(cè)試實(shí)例
- jQuery插件formValidator自定義函數(shù)擴(kuò)展功能實(shí)例詳解
- jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
- JQuery模板插件 jquery.tmpl 動(dòng)態(tài)ajax擴(kuò)展
- boxy基于jquery的彈出層對(duì)話框插件擴(kuò)展應(yīng)用 彈出層選擇器
- jQuery下擴(kuò)展插件和拓展函數(shù)的寫法(匿名函數(shù)使用的典型例子)
- jquery.boxy插件的iframe擴(kuò)展代碼
- jQuery autocomplate 自擴(kuò)展插件、自動(dòng)完成示例代碼
- 利用jQuery插件擴(kuò)展識(shí)別瀏覽器內(nèi)核與外殼的類型和版本的實(shí)現(xiàn)代碼
- jQuery插件擴(kuò)展操作入門示例
相關(guān)文章
jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序,涉及jQuery基于ajax動(dòng)態(tài)獲取json文件數(shù)據(jù)并進(jìn)行數(shù)據(jù)遍歷與排序的相關(guān)操作技巧,需要的朋友可以參考下2018-03-03jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦)
這篇文章主要介紹了jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07jQuery中用on綁定事件時(shí)需注意的事項(xiàng)
本篇文章主要介紹了jQuery中用on綁定事件時(shí)需注意的事項(xiàng),具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery節(jié)點(diǎn)操作的相關(guān)技巧,需要的朋友可以參考下2016-04-04jQuery獲取所有父級(jí)元素及同級(jí)元素及子元素的方法(推薦)
這篇文章主要介紹了jQuery獲取所有父級(jí)元素及同級(jí)元素及子元素的方法,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-01-01利用JQuery寫一個(gè)簡(jiǎn)單的異步分頁(yè)插件
這篇文章主要為大家詳細(xì)介紹了如何利用JQuery寫一個(gè)簡(jiǎn)單的異步分頁(yè)插件,感興趣的小伙伴們可以參考一下2016-03-03