5197.com

建站常识

Welcome to Beijing RuiHeng TianLong Technology Co., Ltd.

jQuery鼠标滑过时,弹出登录框

时间:  来源:网站建设企业  编辑:网站制作企业  点击量:
大家在浏览器网页时,有没有注意过,大多数网站在登录时,一般都是鼠标滑过右上角登录时,会自动弹出一个登录框,例如: 其实这个效果要实现起来很简单,下面我给大家用jquery来演示一下: 首先,大家还是先将html部分写出来,内容如下: brbrbrbrbrbrbr div
大家在上网浏览网页时,有没有注意过,大多数网站在登录时,一般都是鼠标滑过右上角“登录”时,会自动弹出一个登录框,例如:
jQuery鼠标滑过时,弹出登录框(图1)
jQuery鼠标滑过时,弹出登录框(图2)
其实这个效果要实现起来很简单,下面我给大家用jquery来演示一下:
首先,大家还是先将html部分写出来,内容如下:
<br><br><br><br><br><br><br>
<div class="login-header">
    <a href="javascript:void(0);">鼠标滑过,弹出登录框</a>
    <div class="login">
    <div class="login-title">登录会员<span><a href="javascript:void(0);" class="close-login">关闭</a></span></div>
    <div class="login-input-content">
        <div class="login-input">
            <label>用&nbsp;户&nbsp;&nbsp;名:</label>
            <input type="text" placeholder="请输入用户名"  name="info[username]" id="username" class="list-input"/>
        </div>
        <div class="login-input">
            <label>登录密码:</label>
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"/>
        </div>
    </div>
    <div class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
</div>
 
<div class="login-bg"></div>
 
以上为html部分,接下来大家先将js部分代码写出来,内容如下:
$(function () {
    H_login = {};
    H_login.openLogin = function(){
        $('.login-header').hover(function(){
            $('.login').show();
                   },
                   function(){
            $('.login').hide();
                            })
         };
   /* H_login.closeLogin = function(){
        $('.login-header a').mouseout(function(){
            $('.login').hide();
            $('.login-bg').hide();
        });
    };*/
    H_login.loginForm = function () {
        $("#login-button-submit").on('mouseout',function(){
              var username = $("#username");
              var usernameValue = $("#username").val();
              var password = $("#password");
              var passwordValue = $("#password").val();
            if(usernameValue == ""){
                alert("用户名不能为空");
                username.focus();
                return false;
            }else if(usernameValue.length > 15){
                alert("用户名长度不能大于15字符");
                username.focus();
                return false;
            }else if(passwordValue == ""){
                alert("密码不能为空");
                password.focus();
                return false;
            }else if(passwordValue.length < 6 || passwordValue.length > 30){
                alert("密码长度不能小于6或大于30位字符");
                password.focus();
                return false;
            }else{
                alert("登录成功");
                setTimeout(function(){
                    $('.login').hide();
                    $('.login-bg').hide();
                    $('.list-input').val('');
                },2000);
            }
        });
    };
    H_login.run = function () {
        //this.closeLogin();
        this.openLogin();
        this.loginForm();
    };
    H_login.run();
});
大家用的是hover这个函数来完成的事件,当鼠标滑过时,弹出登录框,当鼠标移开时,隐藏登录框;然后大家又在JS代码中将登录框的内容写出来。接下来大家再整体写出CSS样式,内容如下:
* {padding:0px;margin:0px auto;}
body {padding:0px;margin:0px auto;font-size:12px;font-family:"MicroSoft雅黑";}
ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {padding:0px;margin:0px;}
ul,li,ol{list-style:none;}
a{text-decoration:none;color:#000000;}
 
.login-header{width:500px;margin:0 auto;height:70px;text-align:center;font-size:24px;line-height:30px;position:relative;}
.login{width:500px;position:fixed;border:#ebebeb solid 1px;height:280px;top:35%;left:50%;display:none;background:#ffffff;box-shadow:0px 0px 20px #ddd;z-index:9999;margin-left:-250px;margin-top:-140px;}
.login-title{width:100%;margin:10px 0px 0px 0px;text-align:center;line-height:40px;height:40px;font-size:18px;position:relative;}
.login-title span{position:absolute;font-size:12px;right:-20px;top:-30px;background:#ffffff;border:#ebebeb solid 1px;width:40px;height:40px;border-radius:20px;}
.login-title span a{display:block;}
.login-input-content{margin-top:20px;}
.login-input {overflow:hidden;margin:0px 0px 20px 0px;}
.login-input label{float:left;width:90px;padding-right:10px;text-align:right;line-height:35px;height:35px;font-size:14px;}
.login-input input.list-input{float:left;line-height:35px;height:35px;width:350px;border:#ebebeb 1px solid;text-indent:5px;}
.login-button{width:50%;margin:30px auto 0px auto;line-height:40px;font-size:14px;border:#ebebeb 1px solid;text-align:center;}
.login-button a{display:block;}
.login-bg{width:100%;height:100%;position:fixed;top:0px;left:0px;background:#ebebeb;filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3;opacity:0.3;display:none;}
以上大家要做的鼠标滑过,弹出登录框;鼠标滑开,隐藏登录框的效果就做出来了。至于样式上的细节大家还可以再自行调整。怎么样?5197.com你学会了吗?
本文TAG标签:
返回关闭本页
上一篇:浏览器的兼容性问题与解决方案    下一篇:CSS搜索框样式
推荐阅读

Copyright ? 2010-2021 北京瑞恒天龙科技有限企业  All Rights Reserved  |  5197.com知名服务商  |  5197.com | 京ICP备11004170号-1   京公网安备110107000463号
地址:北京市海淀区永定路长银大厦B座  非工作时间:15810379666  服务热线:400-600-6204 座机:010-89941606 转801/802/803/804  版权所有 盗版必究!

在线咨询
关闭
电话咨询
网站制作电话
400-600-6204
XML 地图 | Sitemap 地图