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 相关文章推荐
js类 from qq
Nov 13 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
js实现二级导航功能
Mar 03 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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 采集心得技巧
2009/05/15 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php实现监听事件
2013/11/06 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
php实现递归的三种基本方式
2020/07/04 PHP
JS设置获取cookies的方法
2014/01/26 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
浅析python函数式编程
2020/09/26 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
班级聚会策划书
2014/01/16 职场文书
见习期自我鉴定
2014/01/31 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书