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实现全选、全不选以及单选功能
Mar 23 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery实现的分页插件完整示例
May 26 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如何抛出异常处理错误
2011/03/02 PHP
PHP的5个安全措施小结
2012/07/17 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
layui分页效果实现代码
2017/05/19 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
JsonProperty 的使用方法详解
2019/10/11 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python使用selenium实现批量文件下载
2019/03/11 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
AOP的定义以及作用
2013/09/08 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
实用求职信范文分享
2013/12/25 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
颐和园导游词
2015/01/30 职场文书
单身证明格式样本
2015/06/15 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
深入理解go缓存库freecache的使用
2022/02/15 Golang
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js