您的位置:首页 - 教程 - jQuery - 正文
jquery下拉层登录框

效果体验:http://hovertree.com/texiao/jquery/15.htm

Demo1:http://hovertree.com/hvtart/bjae/jftxwtko.htm

Demo 2:http://hovertree.com/hvtart/bjae/vgte3y3a.htm

代码如下:

<!DOCTYPE HTML >
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><base target="_blank" />
<title>点击登录按钮弹出登录层(HTML+CSS+JS)_何问起 http://hovertree.com</title>
<meta name="keywords" content="HTML+CSS模板,HTML+CSS教程,HTML+CSS导航菜单,FLASH焦点图,网页特效" />
<meta name="description" content="何问起为您提供-HTML+CSS模板,HTML+CSS教程,JS广告代码,HTML+CSS导航菜单,FLASH焦点图片,国外网页设计欣赏与模板和CSS技巧。" />
<link href="http://hovertree.com/texiao/jquery/15/front.css" media="screen, projection" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="topnav" class="topnav">点击右边的按钮试试? <a href="login" class="signin"><span>登录</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin" action="http://tool.hovertree.com/info/ip/">
<p> <label for="username">账号或者邮箱</label>
<input id="username" name="username" value="" title="username" tabindex="4" type="text">
</p>
<p>
<label for="password">密码</label>
<input id="password" name="password" value="" title="password" tabindex="5" type="password">
</p>
<p class="remember">
<input id="signin_submit" value="登录" tabindex="6" type="submit">
<input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
<label for="remember">记住我</label>
</p>
</form>
</fieldset>
</div>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});

$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});

});
</script>
<script src="http://hovertree.com/texiao/jquery/15/jquery.tipsy.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function() {
$('#forgot_username_link').tipsy({gravity: 'w'});
});
</script>


<!--下面只是说明与程序代码无关-->
<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<a href="http://hovertree.com/hvtart/bjae/vgte3y3a.htm">原文</a>
<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/menu/jquery/">jQuery</a> <a href="http://hovertree.com/hvtart/bjae/jftxwtko.htm">Demo 1</a> <a href="http://hovertree.com/hvtart/bjae/vgte3y3a.htm">Demo 2</a><br />
<span>本代码由<a href="http://hovertree.com" style="color:#F00;">何问起网 收集整理</a> </span><br>
<a href="http://hovertree.com">何问起 http://hovertree.com</a><br /><br />
<span>我们为您提供-HTML+CSS模板,HTML+CSS教程,JS广告代码,HTML+CSS导航菜单,国外网页设计欣赏与模板和CSS技巧。</span><br />
<span>何问起只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计。</span>
</div>
</body>
</html>

评论: