<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>
<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.jb200.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.jb200.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.jb200.com" target="_blank"/>
</map>
</div>
</div>
</div>
