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

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

(0)

相关推荐

  • jQuery autocomplate 自扩展插件、自动完成示例代码

    复制代码 代码如下: 不过做了浏览器方面的兼容,经测试兼容IE6+.Firefox3.5+ 首先看看autocomplate.js: ;(function ($) { var index = -1; var timeId; var cssOptions = { "border": "1px solid black", "background-color": "white", "position": &quo

  • JQuery模板插件 jquery.tmpl 动态ajax扩展

    在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以特地写成jquery工具函数,加入了本地数据和ajax数据加载模板,数据的方式. 参数说明: Tmpl: function(template, data, fun) 1:template: 1): url: 为ajax的加载url,ajax当且仅当remote= true时候加载. 2):data:

  • jQuery插件扩展操作入门示例

    本文实例讲述了jQuery插件扩展操作.分享给大家供大家参考,具体如下: 如下DEMO 展示了为dom扩展一个myshowHtml 的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery.js"></script> </head> <body

  • jQuery插件formValidator自定义函数扩展功能实例详解

    本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法.分享给大家供大家参考,具体如下: jQuery formValidator表单验证插件是什么?感兴趣的读者可参考<jQuery formValidator表单验证插件>以及本站其他相关文档 此处省略若干文字. 实际项目中的表单应用是多种多样的,随之而来的验证也是多变的,但Jquery formValidator为我们提供了自定义函数接口,个人认为是其最主要的强大之处.废话不多说,直接实例. 例一:座机和手机,至少

  • jquery事件机制扩展插件 jquery鼠标右键事件

    因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直

  • jQuery插件扩展实例【添加回调函数】

    本文实例讲述了jQuery插件扩展的方法.分享给大家供大家参考,具体如下: <script language="javascript" type="text/javascript"> function doSomething(callback) { // - // Call the callback callback('stuff', 'goes', 'here'); // 给callback赋值,callback是个函数变量 } function fo

  • jQuery插件扩展extend的简单实现原理

    相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码. 本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的.(大牛可以出门右拐......) 我们可以模拟创建一个迷你jQuery. var $ = {

  • 利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码

    尤其是在当今各种浏览器满天飞(据说仅以IE为内核的浏览器就有200种之多). 小弟今天写了个基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本.可识别各种浏览器的内核,并已经支持多种国内主流浏览器. 费话不多说,上我的JavaScript代码:(文件名:jquery.browsertype-1.0.js) 复制代码 代码如下: /** * jQuery插件开发方法二:第一步:插件定义 */ jQuery.myPlugin = { //获得浏览器的内核与外壳的类型和版本 Clie

  • jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)

    我选择了jQuery,最主要是它的思想"write less,do more",因为我是一个挑剔的人,以前写过的代码,会时不时翻出来,看看有没有可以精简,优化的地方.一来是对不断学习的推动,二来可以将新的思想,技术应用到里面去. 对于jQuery插件的写法,以前就有介绍过,网上也有很多例子. 这里简要地进行些写法,主要是简写的说明,见下列代码: <script type="text/javascript" src="jquery-1.4.2.js&q

  • jQuery插件扩展测试实例

    本文实例讲述了jQuery插件扩展测试方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

  • jquery.boxy插件的iframe扩展代码

    复制代码 代码如下: /* <a href="a.html" onclick="return $.qbox(this);" > <a href="a.html" onclick="return qBox.iFLoad(this);" > <a href="a.html" onclick="return qBox.iFrame({src:'b.html'})"

  • boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器

    我们使用热门的jquery进行设计,同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料,请参照张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318).下面介绍boxy作为选择器框架的应用. 对于选择器,相信用过招聘网站的人都不会陌生(就是那个点击就弹出的,选择行业.职位和地区的东西),选择器难点就在于样式调试,主要针对的是IE6.这里介绍行业.职位和地区选择器,下载的Demo包含这三个选择器. 行业选择器:无关联,调用语句为Box

随机推荐