支付寶首頁的焦點圖就是用的kinMaxShow 擴展效果(前段時間支付寶使用的，不知道現(xiàn)在還是不是這種，另外支付寶的這個焦點圖動畫效果是分瀏覽器的，IE8及以下瀏覽器無動畫純靜態(tài)，只是在谷歌、火狐等現(xiàn)代瀏覽器才會出現(xiàn)動畫。) 這只是kinMaxShow擴展的一個小例子，更多效果你可以自己發(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è)置焦點圖高度(單位:像素) 必須設(shè)置 否則使用默認(rèn)值 500
 height:400,
 //設(shè)置焦點圖 按鈕效果
 button:{
  //設(shè)置按鈕上面不顯示數(shù)字索引(默認(rèn)也是不顯示索引)
  showIndex:false,
  //按鈕常規(guī)下 樣式設(shè)置 ，css寫法，
  //類似jQuery的 $('xxx').css({key:value,……})中css寫法。  
  //【友情提示：可以設(shè)置透明度哦 不用區(qū)分瀏覽器
  //統(tǒng)一為 opacity，CSS3屬性也支持哦
  //如：設(shè)置按鈕圓角、投影等，只不過IE8及以下不支持】  
  normal:{background:'url(images/button.png) no-repeat -14px 0',
  marginRight:'8px',border:'0',right:'44%',bottom:'20px'},
  //當(dāng)前焦點圖按鈕樣式 設(shè)置，寫法同上
  focus:{background:'url(images/button.png) no-repeat 0 0',
  border:'0'
  }
 },
 //焦點圖切換回調(diào)，每張圖片淡入、淡出都會調(diào)用。
 //并且傳入2個參數(shù)(index,action)。
 //index 當(dāng)前圖片索引 0為第一張圖片，
 //action 切入 或是 切出 值:fadeIn或fadeOut
 //函數(shù)內(nèi) this指向 當(dāng)前圖片容器對象 可用來操作里面元素。
 //本例中的焦點圖動畫主要就是靠callback實現(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>
 <!--這是焦點圖大圖圖片，下面為動畫元素所需圖片-->
 <img src="images/demo_extend_images/1.jpg" />
 <!--如果需要附加內(nèi)容在焦點圖內(nèi)部 需要用一個div包裹起來，
 如下面標(biāo)紅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" />
 <!--此處焦點圖上面的局部鏈接 可不用圖片熱區(qū)鏈接，
 可用普通a鏈接實現(xiàn)，偷個懶 (: -->  
  <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>

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

您可能感興趣的文章: