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 相关文章推荐
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
PHP缓存技术的使用说明
2011/08/06 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
Vue性能优化的方法
2020/07/30 Javascript
python算法学习之基数排序实例
2013/12/18 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
Jar包的作用是什么
2014/03/30 面试题
大学生自我鉴定书
2014/03/24 职场文书
卖房授权委托书样本
2014/10/05 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python