本文實例講述了jQuery插件kinMaxShow擴展效果用法。分享給大家供大家參考。具體分析如下：
支付寶首頁的焦點圖就是用的kinMaxShow 擴展效果(前段時間支付寶使用的，不知道現在還是不是這種，另外支付寶的這個焦點圖動畫效果是分瀏覽器的，IE8及以下瀏覽器無動畫純靜態，只是在谷歌、火狐等現代瀏覽器才會出現動畫。) 這只是kinMaxShow擴展的一個小例子，更多效果你可以自己發揮。 代碼如下：
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({ //設置焦點圖高度(單位:像素) 必須設置 否則使用默認值 500 height:400, //設置焦點圖 按鈕效果 button:{ //設置按鈕上面不顯示數字索引(默認也是不顯示索引) showIndex:false, //按鈕常規下 樣式設置 ，css寫法， //類似jQuery的 $('xxx').css({key:value,……})中css寫法。 //【友情提示：可以設置透明度哦 不用區分瀏覽器 //統一為 opacity，CSS3屬性也支持哦 //如：設置按鈕圓角、投影等，只不過IE8及以下不支持】 normal:{background:'url(images/button.png) no-repeat -14px 0', marginRight:'8px',border:'0',right:'44%',bottom:'20px'}, //當前焦點圖按鈕樣式 設置，寫法同上 focus:{background:'url(images/button.png) no-repeat 0 0', border:'0' } }, //焦點圖切換回調，每張圖片淡入、淡出都會調用。 //并且傳入2個參數(index,action)。 //index 當前圖片索引 0為第一張圖片， //action 切入 或是 切出 值:fadeIn或fadeOut //函數內 this指向 當前圖片容器對象 可用來操作里面元素。 //本例中的焦點圖動畫主要就是靠callback實現的。 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> <!--這是焦點圖大圖圖片，下面為動畫元素所需圖片--> <img src="images/demo_extend_images/1.jpg" /> <!--如果需要附加內容在焦點圖內部 需要用一個div包裹起來， 如下面標紅div所示，否則kinMaxShow會解析混亂--> <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" /> <!--此處焦點圖上面的局部鏈接 可不用圖片熱區鏈接， 可用普通a鏈接實現，偷個懶 (: --> <map name="Map_1_2" id="Map_1_2"> <area shape="rect" coords="2,96,106,123" href="http://www.49028c.com" 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.49028c.com" 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.49028c.com" 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>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
