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 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
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读写文件的方法(生成HTML)
2006/11/27 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
canvas实现钟表效果
2017/02/13 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
Python线程详解
2015/06/24 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Python dict的常用方法示例代码
2020/06/23 Python
python能做哪些生活有趣的事情
2020/09/09 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
如何手工释放资源
2013/12/15 面试题
物流专业求职信
2014/06/30 职场文书
计算机实训报告范文
2014/11/05 职场文书
2015政治思想表现评语
2015/03/25 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers