首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 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
tokenizer(1) SSH(3) 人人对战(1) 2022年7月新番(1) Vscode(3) 后端(1) 算法(1) 时钟(1) 双人对弈(1) Parser(1)
You might like
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
PHP输入流php://input介绍
2012/09/18 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
学习使用bootstrap基本控件（table、form、button）
2016/04/12 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
js/jquery遍历对象和数组的方法分析【forEach，map与each方法】
2019/02/27 jQuery
python中pip的安装与使用教程
2018/08/10 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
STP的判定过程
2012/10/01 面试题
Servlet面试题库
2015/07/18 面试题
汽车销售求职自荐信
2013/10/01 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
主持人大赛开场白
2015/05/29 职场文书
幼儿园托班开学寄语（2016秋季）
2015/12/03 职场文书
MySQL分布式恢复进阶
2022/07/23 MySQL