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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
javascript removeChild 使用注意事项
Apr 11 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
解决vue中的无限循环问题
Jul 27 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
神族 PROTOSS 概述
2020/03/14 星际争霸
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
php短信接口代码
2016/05/13 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
Bootstrap每天必学之表单
2015/11/23 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Python datetime模块使用方法小结
2020/06/18 Python
四年的大学生生活自我评价
2013/12/09 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
优秀党员获奖感言
2014/02/18 职场文书
人事部经理岗位职责
2014/03/07 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
工厂搬迁方案
2014/05/11 职场文书
校园文明标语
2014/06/13 职场文书
社区创先争优承诺书
2014/08/30 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
JavaScript函数柯里化
2021/11/07 Javascript
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python