jQuery插件kinMaxShow擴展效果用法實例

2024-05-06 16:19:18

字體：大中小

來源：轉載

供稿：網友

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

本文實例講述了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>

<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" />



<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>