這篇文章主要介紹了jQuery插件kinMaxShow擴(kuò)展效果用法,實(shí)例分析了kinMaxShow擴(kuò)展的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery插件kinMaxShow擴(kuò)展效果用法。分享給大家供大家參考。具體分析如下：

支付寶首頁的焦點(diǎn)圖就是用的kinMaxShow 擴(kuò)展效果(前段時(shí)間支付寶使用的，不知道現(xiàn)在還是不是這種，另外支付寶的這個(gè)焦點(diǎn)圖動畫效果是分瀏覽器的，IE8及以下瀏覽器無動畫純靜態(tài)，只是在谷歌、火狐等現(xiàn)代瀏覽器才會出現(xiàn)動畫。) 這只是kinMaxShow擴(kuò)展的一個(gè)小例子，更多效果你可以自己發(fā)揮。 代碼如下：

javascript 代碼：

1. <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> 
2. <script src="js/jquery.kinMaxShow-1.0.min.js" 
3. type="text/javascript"></script> 
4. <script type="text/javascript"> 
5. $(function(){ 
6. $("#kinMaxShow").kinMaxShow({ 
7. //設(shè)置焦點(diǎn)圖高度(單位:像素) 必須設(shè)置 否則使用默認(rèn)值 500 
8. height:400, 
9. //設(shè)置焦點(diǎn)圖 按鈕效果 
10. button:{ 
11. //設(shè)置按鈕上面不顯示數(shù)字索引(默認(rèn)也是不顯示索引) 
12. showIndex:false, 
13. //按鈕常規(guī)下 樣式設(shè)置 ，css寫法， 
14. //類似jQuery的 $('xxx').css({key:value,……})中css寫法。  
15. //【友情提示：可以設(shè)置透明度哦 不用區(qū)分瀏覽器 
16. //統(tǒng)一為 opacity，CSS3屬性也支持哦 
17. //如：設(shè)置按鈕圓角、投影等，只不過IE8及以下不支持】  
18. normal:{background:'url(images/button.png) no-repeat -14px 0', 
19. marginRight:'8px',border:'0',right:'44%',bottom:'20px'}, 
20. //當(dāng)前焦點(diǎn)圖按鈕樣式 設(shè)置，寫法同上 
21. focus:{background:'url(images/button.png) no-repeat 0 0', 
22. border:'0' 
23. } 
24. }, 
25. //焦點(diǎn)圖切換回調(diào)，每張圖片淡入、淡出都會調(diào)用。 
26. //并且傳入2個(gè)參數(shù)(index,action)。 
27. //index 當(dāng)前圖片索引 0為第一張圖片， 
28. //action 切入 或是 切出 值:fadeIn或fadeOut 
29. //函數(shù)內(nèi) this指向 當(dāng)前圖片容器對象 可用來操作里面元素。 
30. //本例中的焦點(diǎn)圖動畫主要就是靠callback實(shí)現(xiàn)的。 
31. callback:function(index,action){ 
32. switch(index){ 
33. case 0 : 
34. if(action=='fadeIn'){ 
35. $(this).find('.sub_1_1').animate({left:'70px'},600) 
36. $(this).find('.sub_1_2').animate({top:'60px'},600) 
37. }else{ 
38. $(this).find('.sub_1_1').animate({left:'110px'},600) 
39. $(this).find('.sub_1_2').animate({top:'120px'},600) 
40. }; 
41. break; 
42. case 1 : 
43. if(action=='fadeIn'){ 
44. $(this).find('.sub_2_1').animate({left:'-100px'},600) 
45. $(this).find('.sub_2_2').animate({top:'60px'},600) 
46. }else{ 
47. $(this).find('.sub_2_1').animate({left:'-160px'},600)  
48. $(this).find('.sub_2_2').animate({top:'20px'},600) 
49. }; 
50. break; 
51. case 2 : 
52. if(action=='fadeIn'){ 
53. $(this).find('.sub_3_1').animate({right:'350px'},600) 
54. $(this).find('.sub_3_2').animate({left:'180px'},600) 
55. }else{ 
56. $(this).find('.sub_3_1').animate({right:'180px'},600)  
57. $(this).find('.sub_3_2').animate({left:'30px'},600) 
58. }; 
59. break;  
60. } 
61. } 
62. }); 
63. }); 
64. </script> 

HTML 代碼：

1. <div id="kinMaxShow"> 
2. <div> 
3. <!--這是焦點(diǎn)圖大圖圖片，下面為動畫元素所需圖片--> 
4. <img src="images/demo_extend_images/1.jpg" /> 
5. <!--如果需要附加內(nèi)容在焦點(diǎn)圖內(nèi)部 需要用一個(gè)div包裹起來， 
6. 如下面標(biāo)紅div所示，否則kinMaxShow會解析混亂--> 
7. <div> 
8. <img class="sub_1_1" src="images/demo_extend_images/sub_1_1.png"/> 
9. <img class="sub_1_2" src="images/demo_extend_images/sub_1_2.png" 
10. usemap="#Map_1_2" border="0" /> 
11. <!--此處焦點(diǎn)圖上面的局部鏈接 可不用圖片熱區(qū)鏈接， 
12. 可用普通a鏈接實(shí)現(xiàn)，偷個(gè)懶 (: --> 
13. <map name="Map_1_2" id="Map_1_2"> 
14. <area shape="rect" coords="2,96,106,123" 
15. href="http://www.survivalescaperooms.com" target="_blank"/> 
16. </map> 
17. </div> 
18. </div> 
19. <div> 
20. <img src="images/demo_extend_images/2.jpg" /> 
21. <div> 
22. <img class="sub_2_1" src="images/demo_extend_images/sub_2_1.png"/> 
23. <img class="sub_2_2" src="images/demo_extend_images/sub_2_2.png" 
24. usemap="#Map_2_2" border="0" /> 
25. <map name="Map_2_2" id="Map_2_2"> 
26. <area shape="rect" coords="3,97,104,124" 
27. href="http://www.survivalescaperooms.com" target="_blank"/> 
28. </map>  
29. </div>  
30. </div> 
31. <div> 
32. <img src="images/demo_extend_images/3.jpg" /> 
33. <div> 
34. <img class="sub_3_1" src="images/demo_extend_images/sub_3_1.png"/> 
35. <img class="sub_3_2" src="images/demo_extend_images/sub_3_2.png" 
36. usemap="#Map_3_2" border="0" /> 
37. <map name="Map_3_2" id="Map_3_2"> 
38. <area shape="rect" coords="1,98,106,124" 
39. href="http://www.survivalescaperooms.com" target="_blank"/> 
40. </map>  
41. </div> 
42. </div> 
43. </div> 

CSS樣式：

1. <style type="text/css"> 
2. #kinMaxShow{display:none;} 
3. #kinMaxShow .sub_1_1{ 
4. display:block; position:absolute;left:110px; top:136px; 
5. } 
6. #kinMaxShow .sub_1_2{ 
7. display:block; position:absolute;left:110px; top:120px; 
8. } 
9. #kinMaxShow .sub_2_1{ 
10. display:block; position:absolute;left:-160px; bottom:0px; 
11. } 
12. #kinMaxShow .sub_2_2{ 
13. display:block; position:absolute;left:110px; top:20px; 
14. } 
15. #kinMaxShow .sub_3_1{ 
16. display:block; position:absolute;right:180px; bottom:0px; 
17. } 
18. #kinMaxShow .sub_3_2{ 
19. display:block; position:absolute;left:30px; top:40px; 
20. } 
21. </style> 

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。