jQuery插件kinMaxShow扩展效果用法实例
本文实例讲述了jQuery插件kinMaxShow扩展效果用法。分享给大家供大家参考。具体分析如下：
支付宝首页的焦点图就是用的kinMaxShow扩展效果(前段时间支付宝使用的，不知道现在还是不是这种，另外支付宝的这个焦点图动画效果是分浏览器的，IE8及以下浏览器无动画纯静态，只是在谷歌、火狐等现代浏览器才会出现动画。)这只是kinMaxShow扩展的一个小例子，更多效果你可以自己发挥。代码如下：
javascript代码：
<scriptsrc="js/jquery-1.10.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.kinMaxShow-1.0.min.js"
type="text/javascript"></script>
<scripttype="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-14px0',
marginRight:'8px',border:'0',right:'44%',bottom:'20px'},
//当前焦点图按钮样式设置，写法同上
focus:{background:'url(images/button.png)no-repeat00',
border:'0'
}
},
//焦点图切换回调，每张图片淡入、淡出都会调用。
//并且传入2个参数(index,action)。
//index当前图片索引0为第一张图片，
//action切入或是切出值:fadeIn或fadeOut
//函数内this指向当前图片容器对象可用来操作里面元素。
//本例中的焦点图动画主要就是靠callback实现的。
callback:function(index,action){
switch(index){
case0:
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;
case1:
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;
case2:
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代码：
<divid="kinMaxShow"> <div> <!--这是焦点图大图图片，下面为动画元素所需图片--> <imgsrc="images/demo_extend_images/1.jpg"/> <!--如果需要附加内容在焦点图内部需要用一个div包裹起来， 如下面标红div所示，否则kinMaxShow会解析混乱--> <div> <imgclass="sub_1_1"src="images/demo_extend_images/sub_1_1.png"/> <imgclass="sub_1_2"src="images/demo_extend_images/sub_1_2.png" usemap="#Map_1_2"border="0"/> <!--此处焦点图上面的局部链接可不用图片热区链接， 可用普通a链接实现，偷个懒(:--> <mapname="Map_1_2"id="Map_1_2"> <areashape="rect"coords="2,96,106,123" href="https://www.nhooo.com"target="_blank"/> </map> </div> </div> <div> <imgsrc="images/demo_extend_images/2.jpg"/> <div> <imgclass="sub_2_1"src="images/demo_extend_images/sub_2_1.png"/> <imgclass="sub_2_2"src="images/demo_extend_images/sub_2_2.png" usemap="#Map_2_2"border="0"/> <mapname="Map_2_2"id="Map_2_2"> <areashape="rect"coords="3,97,104,124" href="https://www.nhooo.com"target="_blank"/> </map> </div> </div> <div> <imgsrc="images/demo_extend_images/3.jpg"/> <div> <imgclass="sub_3_1"src="images/demo_extend_images/sub_3_1.png"/> <imgclass="sub_3_2"src="images/demo_extend_images/sub_3_2.png" usemap="#Map_3_2"border="0"/> <mapname="Map_3_2"id="Map_3_2"> <areashape="rect"coords="1,98,106,124" href="https://www.nhooo.com"target="_blank"/> </map> </div> </div> </div>
CSS样式：
<styletype="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程序设计有所帮助。