jQuery插件kinMaxShow扩展效果用法实例


Posted in Javascript onMay 04, 2015

本文实例讲述了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="https://3water.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="https://3water.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="https://3water.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程序设计有所帮助。

Javascript 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
jQuery消息提示框插件Tipso
May 04 #Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 #Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 #Javascript
jQuery插件jPaginate实现无刷新分页
May 04 #Javascript
javascript白色简洁计算器
May 04 #Javascript
jQuery简单实现日历的方法
May 04 #Javascript
jquery插件jSignature实现手动签名
May 04 #Javascript
You might like
linux iconv方法的使用
2011/10/01 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
JavaScript中合并数组的N种方法
2014/09/16 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
js中let能否完全替代IIFE
2019/06/15 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
自定义django admin model表单提交的例子
2019/08/23 Python
python处理document文档保留原样式
2019/09/23 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
JAVA招聘远程笔试题
2015/07/23 面试题
汉语专业应届生求职信
2013/10/01 职场文书
数据员岗位职责
2013/11/19 职场文书
护士实习鉴定范文
2013/12/22 职场文书
物流专员岗位职责
2014/02/17 职场文书
家长会主持词开场白
2014/03/18 职场文书
精神文明建设标语
2014/06/16 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
python使用glob检索文件的操作
2021/05/20 Python