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 append与appendTo方法比较
May 24 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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动态图像的创建
2006/10/09 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jquery 使用简明教程
2014/03/05 Javascript
Express.JS使用详解
2014/07/17 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
深入理解vue Render函数
2017/07/19 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
django query模块
2019/04/20 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
联村联户简报
2015/07/21 职场文书
运动会广播稿300字
2015/08/19 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL