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 相关文章推荐
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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 正则学习实例
2008/07/30 PHP
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
Angularjs 基础入门
2014/12/26 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
JS计算距当前时间的时间差实例
2017/12/29 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
Django内容增加富文本功能的实例
2017/10/17 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python异常触发及自定义异常类解析
2019/08/06 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
商务日语毕业生自荐信
2013/11/23 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
植树节口号
2014/06/21 职场文书
《小摄影师》教学反思
2016/02/18 职场文书