jQuery实现百度登录框的动态切换效果


Posted in jQuery onApril 21, 2017

点击右下角图片进行状态切换,效果图

jQuery实现百度登录框的动态切换效果

jQuery实现百度登录框的动态切换效果

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>百度登录框</title> 
  <style type="text/css"> 
    *{margin: 0;padding: 0;} 
    body 
    { 
      font-size: 12px; 
    } 
    a 
    { 
      text-decoration: none; 
      color: #2647CB; 
    } 
    a:hover 
    { 
      text-decoration: underline; 
      color: red; 
    } 
    .wrap 
    { 
      width: 390px; 
      height: 450px; 
      margin: 50px auto; 
      border: 1px solid #8A8989; 
      position: relative; 
    } 
    .main 
    { 
      width: 350px; 
      height: 400px; 
      margin: 0 auto; 
    } 
    .header 
    { 
      width: 100%; 
      height: 50px; 
      line-height: 50px; 
      background-image: url(images/foot.png); 
      background-color: rgb(247,247,247); 
      background-repeat: no-repeat; 
    } 
    .header h3 
    { 
      display: inline-block; 
      line-height: 50px; 
      margin-left: 50px; 
    } 
    .header span 
    { 
      display: inline-block; 
      float: right; 
      margin: auto 15px; 
      font-size: 30px; 
    } 
    .inputDiv 
    { 
      display: block; 
      width: 350px; 
      height: 40px; 
      margin: 10px auto; 
    } 
    .phoneIn 
    { 
      display: inline-block; 
      float: right; 
      font-size: 14px; 
      background-image: url(images/phone.png); 
      background-repeat: no-repeat; 
      padding-left: 20px; 
      margin: 30px 0px 10px 0px; 
    } 
    .smBtn 
    { 
      background: #2066C5; 
      color: white; 
      font-size: 18px; 
      font-weight: bold; 
      height: 50px; 
      border-radius: 4px; 
    } 
    .smBtn:hover 
    { 
      background: #4067EE; 
    } 
    .pull-right 
    { 
      display: inline-block; 
      float: right; 
    } 
    .other 
    { 
      width: 350px; 
      padding-top: 50px; 
      margin: 0 auto; 
    } 
    .toggleDiv1,.toggleDiv2 
    { 
      position: absolute; 
      right: 0; 
      bottom: 0; 
      z-index: 1000; 
    } 
    .weima 
    { 
      text-align: center; 
      padding-top: 50px; 
      width: 390px; 
      height: 400px; 
    } 
    .weima p  
    { 
      line-height: 50px; 
    } 
    .choice2 
    { 
      display: none; 
    } 
    #close:hover 
    { 
      cursor: pointer; 
      color: blue; 
    } 
  </style> 
</head> 
<body> 
<!-- 账号密码登录 --> 
  <div class="wrap"> 
    <div class="header"> 
      <h3>登录百度账号</h3> 
      <span id="close" title="关闭">X</span> 
    </div> 
    <div class="choice1"> 
      <div class="main"> 
      <a href="" class=" rel="external nofollow" rel="external nofollow" rel="external nofollow" phoneIn">短信快捷登录</a> 
      <form action=""> 
        <input type="text" class="inputDiv" placeholder="手机/邮箱/账号"> 
        <input type="password" class="inputDiv" placeholder="请输入登录密码"> 
        <p class="inputDiv"> 
        <input type="checkbox" value="checked" checked="checked"><label for="">下次自动登录</label> 
        <a href="" class=" rel="external nofollow" rel="external nofollow" rel="external nofollow" pull-right" >登录遇到问题</a> 
        </p> 
        <input type="submit" value="登录" class="inputDiv smBtn"> 
        <a href="" class=" rel="external nofollow" rel="external nofollow" rel="external nofollow" pull-right" >立即注册</a> 
      </form> 
      <div class="other"> 
      <p>可以使用以下方式登录</p> 
      <a href=""><img src=" rel="external nofollow" rel="external nofollow" images/qq.png" alt=""></a> 
      <a href=""><img src=" rel="external nofollow" rel="external nofollow" images/wb.png" alt=""></a> 
      </div> 
    </div> 
    <div class="toggleDiv1"> 
      <img src="images/small2wm.png" alt=""> 
      </div> 
    </div> 
    <!-- 二维码登录 --> 
<div class="choice2"> 
    <div class="weima"> 
    <p>手机扫描,安全登录</p> 
    <img src="images/2weima.png" alt=""> 
    <p>请使用手机百度app扫描登录</p> 
  </div> 
    <div class="toggleDiv2"> 
      <img src="images/cpt.png" alt=""> 
    </div> 
  </div> 
  </div> 
</body> 
<!-- 导入jquery文件 --> 
<script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
<script> 
  $(document).ready(function(){ 
  /*这是一个自定义的函数,作用是设置class1类为隐藏,class2类显示*/ 
     function showDiv(class1,class2){ 
      $(class1).css("display","none"); 
      $(class2).css("display","block"); 
     } 
  /*给右下角的图标设置点击事件*/ 
    $('.toggleDiv1').click(function(){ 
      showDiv(".choice1",".choice2"); 
    }) 
    $('.toggleDiv2').click(function(){ 
      showDiv(".choice2",".choice1"); 
    }) 
  /*给右上角的关闭按钮设置点击事件*/ 
    $("#close").click(function(){ 
      $(".wrap").css("display","none"); 
    }) 
  }) 
</script> 
</html>

以上所述是小编给大家介绍的jQuery实现百度登录框的动态切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 #jQuery
jQuery+pjax简单示例汇总
Apr 21 #jQuery
基于jQuery实现文字打印动态效果
Apr 21 #jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 #jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
jQuery Plupload上传插件的使用
Apr 19 #jQuery
You might like
人大复印资料处理程序_补充篇
2006/10/09 PHP
php数组去除空值函数分享
2015/02/02 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
用JS实现的一个include函数
2007/07/21 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
python连接mysql并提交mysql事务示例
2014/03/05 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python将图片转换为字符画的方法
2020/06/16 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
诚信承诺书模板
2014/05/26 职场文书
另类冲刺标语
2014/06/24 职场文书
大学学生会辞职信
2015/05/13 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书