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 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 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/01/07 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
实例讲解React 组件
2020/07/07 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Django添加feeds功能的示例
2018/08/07 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python中PyQuery库用法分享
2021/01/15 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
我的小天地教学反思
2014/04/30 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
毕业论文致谢范文
2015/05/14 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
PHP获取学生成绩的方法
2021/11/17 PHP