jQuery实现仿Alipay支付宝首页全屏焦点图切换特效


Posted in Javascript onMay 04, 2015

本文实例讲述了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kinMaxShow 扩展效果</title>
<link type="text/css" href="_doc/base.css" rel="stylesheet" />
<style type="text/css"> 
body{ margin:0; padding:0;}
#Login{ position:relative;}
#loginPlane{
position:absolute;width:100%;
height:330px; top:0;
left:0;z-index:88;
}
#loginWrap{
width:960px;margin:0 auto;
padding-top:20px;
}
#loginBox{
width:286px;height:330px;
filter:progid:DXImageTransform.Microsoft.gradient(
startcolorstr=#88000000,endcolorstr=#88000000);
background:rgba(0,0,0,0.2);
float:right; margin-right:20px;
}
#loginBox h3{
border-bottom:1px solid #ccc;
margin:10px; color:#fff;
font-weight:normal; font-size:16px;
line-height:26px;
}
#loginBox form{
color:#fff; font-size:12px;
padding:8px 0 0 20px
}
#loginBox .text{
padding:4px;border:1px solid;
border-color:#aaa #ddd #ddd #aaa;
height:20px; width:230px;
font-family:Verdana
}
#loginBox .submit{
color:#fff; border:0;
background:#FFA600;width:236px;
height:35px; font-weight:bold;
font-family:"Microsoft Yahei";
font-size:14px;
}
#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>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.kinMaxShow-1.1.min.js" 
type="text/javascript"></script>
<script type="text/javascript"> 
$(function(){
 $("#kinMaxShow").kinMaxShow({
 height:400,
 button:{
 showIndex:false,
 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'
 }
 },
 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>
</head>
<body>
 <div id="Login"> 
 <div id="kinMaxShow">
 <div>
  <img src="images/1.jpg" />
  <div>
  <img class="sub_1_1" src="images/sub_1_1.png" />
  <img class="sub_1_2" src="images/sub_1_2.png"
  usemap="#Map_1_2" border="0" />
  <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/2.jpg" />
  <div>
  <img class="sub_2_1" src="images/sub_2_1.png" />
  <img class="sub_2_2" src="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/3.jpg" />
  <div>
  <img class="sub_3_1" src="images/sub_3_1.png" />
  <img class="sub_3_2" src="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>
 <div id="loginPlane">
 <div id="loginWrap">
  <div id="loginBox">
   <h3>登陆支付宝</h3>
   <form>
   <label>账户名:</label>
   <p><input type="text" class="text" /></p>
   <label>登陆密码:</label>
   <p><input type="password" class="text" /></p> 
   <br />
   <p><input type="button" value=" 登 陆 " class="submit" /></p>   
   </form>
  </div>
 </div>
 </div>
 </div>
</body>
</html>

jquery.kinMaxShow-1.1.min.js点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 #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
You might like
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
jquery操作select方法汇总
2015/02/05 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
数字天堂软件测试面试题
2012/12/23 面试题
幼师专业毕业生自荐信
2013/09/29 职场文书
优质服务演讲稿
2014/05/14 职场文书
12岁生日演讲稿
2014/05/14 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
入党积极分子个人总结
2015/03/02 职场文书
行政诉讼答辩状
2015/05/21 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书