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中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery操作css样式
May 15 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jquery简易手风琴插件的封装
Oct 13 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
隐性调用php程序的方法
2009/03/09 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
深入php数据采集的详解
2013/06/02 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Python进度条的制作代码实例
2019/08/31 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
食品安全标语
2014/06/07 职场文书
廉政承诺书
2015/01/19 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
Java 数组的使用
2022/05/11 Java/Android
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android