仿TwitterLogin弹出式登录层jQuery特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是仿TwitterLogin弹出式登录层jQuery特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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">
<title>Twitter Login</title>
<link href="front.css" media="screen, projection" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
  <div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"><span>Sign in</span></a>  
  <fieldset id="signin_menu">
    <form method="post" id="signin" action="https://twitter.com/sessions">
      <label for="username">Username or email</label>
      <input id="username" name="username" value="" title="username" tabindex="4" type="text">
      </p>
      <p>
        <label for="password">Password</label>
        <input id="password" name="password" value="" title="password" tabindex="5" type="password">
      </p>
      <p class="remember">
        <input id="signin_submit" value="Sign in" tabindex="6" type="submit">
        <input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
        <label for="remember">Remember me</label>
      </p>
      <p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>
      <p class="forgot-username"> <A id=forgot_username_link 
title="If you remember your password, try logging in with your email" 
href="#">Forgot your username?</A> </p>
    </form>
  </fieldset>
</div>
<script src="javascripts/jquery.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="javascripts/jquery.tipsy.js" type="text/javascript"></script> 
<script type='text/javascript'>
    $(function() {
	  $('#forgot_username_link').tipsy({gravity: 'w'});   
    });
  </script>
</body>
</html>

JS代码(jquery.pop.js):

//// pop! for jQuery// v0.2 requires jQuery v1.2 or later//// Licensed under the MIT:// http://www.opensource.org/licenses/mit-license.php//// Copyright 2007,2008 SEAOFCLOUDS [http://seaofclouds.com]//(function($){
	$.pop = function(options){
	// settings var settings ={
	pop_class:'.pop',pop_toggle_text:''}
// inject html wrapper function initpops (){
	$(settings.pop_class).each(function(){
	var pop_classes = $(this).attr("class");
	$(this).addClass("pop_menu");
	$(this).wrap("<div class='"+pop_classes+"'></div>");
	$(".pop_menu").attr("class","pop_menu");
	$(this).before(" \ <div class='pop_toggle'>"+settings.pop_toggle_text+"</div> \ ");
}
);
}
initpops();
	// assign reverse z-indexes to each pop var totalpops = $(settings.pop_class).size() + 1000;
	$(settings.pop_class).each(function(i){
	var popzindex = totalpops - i;
	$(this).css({
	zIndex:popzindex}
);
}
);
	// close pops if user clicks outside of pop activePop = null;
	function closeInactivePop(){
	$(settings.pop_class).each(function (i){
	if ($(this).hasClass('active') && i!=activePop){
	$(this).removeClass('active');
}
}
);
	return false;
}
$(settings.pop_class).mouseover(function(){
	activePop = $(settings.pop_class).index(this);
}
);
	$(settings.pop_class).mouseout(function(){
	activePop = null;
}
);
	$(document.body).click(function(){
	closeInactivePop();
}
);
	// toggle that pop $(".pop_toggle").click(function(){
	$(this).parent(settings.pop_class).toggleClass("active");
}
);
}
}
)(jQuery);

JS代码(jquery.tipsy.js):

(function($){
	$.fn.tipsy = function(opts){
	opts = $.extend({
	fade:false,gravity:'n'}
,opts ||{
}
);
	var tip = null,cancelHide = false;
	this.hover(function(){
	$.data(this,'cancel.tipsy',true);
	var tip = $.data(this,'active.tipsy');
	if (!tip){
	tip = $('<div class="tipsy"><div class="tipsy-inner">' + $(this).attr('title') + '</div></div>');
	tip.css({
	position:'absolute',zIndex:100000}
);
	$(this).attr('title','');
	$.data(this,'active.tipsy',tip);
}
var pos = $.extend({
}
,$(this).offset(),{
	width:this.offsetWidth,height:this.offsetHeight}
);
	tip.remove().css({
	top:0,left:0,visibility:'hidden',display:'block'}
).appendTo(document.body);
	var actualWidth = tip[0].offsetWidth,actualHeight = tip[0].offsetHeight;
	switch (opts.gravity.charAt(0)){
	case 'n':tip.css({
	top:pos.top + pos.height,left:pos.left + pos.width / 2 - actualWidth / 2}
).addClass('tipsy-north');
	break;
	case 's':tip.css({
	top:pos.top - actualHeight,left:pos.left + pos.width / 2 - actualWidth / 2}
).addClass('tipsy-south');
	break;
	case 'e':tip.css({
	top:pos.top + pos.height / 2 - actualHeight / 2,left:pos.left - actualWidth}
).addClass('tipsy-east');
	break;
	case 'w':tip.css({
	top:pos.top + pos.height / 2 - actualHeight / 2,left:pos.left + pos.width}
).addClass('tipsy-west');
	break;
}
if (opts.fade){
	tip.css({
	opacity:0,display:'block',visibility:'visible'}
).animate({
	opacity:1}
);
}
else{
	tip.css({
	visibility:'visible'}
);
}
}
,function(){
	$.data(this,'cancel.tipsy',false);
	var self = this;
	setTimeout(function(){
	if ($.data(this,'cancel.tipsy')) return;
	var tip = $.data(self,'active.tipsy');
	if (opts.fade){
	tip.stop().fadeOut(function(){
	$(this).remove();
}
);
}
else{
	tip.remove();
}
}
,100);
}
);
}
;
}
)(jQuery);

CSS代码(front.css):

body{margin:0;padding:0;font:13px/16px "Lucida Grande",Arial,Sans-serif;color:#789;background-color:#ddeef6;background-image:url(images/front-bg.gif);background-repeat:repeat;}
#container{width:780px;margin:0 auto;position:relative;}
#content{width:520px;min-height:500px;}
a:link,a:visited{color:#27b;text-decoration:none;}
a:hover{text-decoration:underline;}
a img{border-width:0;}
#topnav{padding:10px 0px 12px;font-size:11px;line-height:23px;text-align:right;}
#topnav a.signin{background:#88bbd4;padding:4px 6px 6px;text-decoration:none;font-weight:bold;color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;*padding:4px 12px 6px;}
#topnav a.signin:hover{background:#59B;*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;*padding:4px 12px 6px;}
#topnav a.signin,#topnav a.signin:hover{*background-position:0 3px!important;}
a.signin{position:relative;margin-left:3px;}
a.signin span{background-image:url("images/toggle_down_light.png");background-repeat:no-repeat;background-position:100% 50%;padding:4px 16px 6px 0;}
#topnav a.menu-open{background:#ddeef6!important;color:#666!important;outline:none;}
#small_signup{display:inline;float:none;line-height:23px;margin:25px 0 0;width:170px;}
a.signin.menu-open span{background-image:url("images/toggle_up_dark.png");color:#789;}
#signin_menu{-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;display:none;background-color:#ddeef6;position:absolute;width:210px;z-index:100;border:1px transparent;text-align:left;padding:12px;top:24.5px;right:0px;margin-top:5px;margin-right:0px;*margin-right:-1px;color:#789;font-size:11px;}
#signin_menu input[type=text],#signin_menu input[type=password]{display:block;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #ACE;font-size:13px;margin:0 0 5px;padding:5px;width:203px;}
#signin_menu p{margin:0;}
#signin_menu a{color:#6AC;}
#signin_menu label{font-weight:normal;}
#signin_menu p.remember{padding:10px 0;}
#signin_menu p.forgot,#signin_menu p.complete{clear:both;margin:5px 0;}
#signin_menu p a{color:#27B!important;}
#signin_submit{-moz-border-radius:4px;-webkit-border-radius:4px;background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;border:1px solid #39D;color:#fff;text-shadow:0 -1px 0 #39d;padding:4px 10px 5px;font-size:11px;margin:0 5px 0 0;font-weight:bold;}
#signin_submit::-moz-focus-inner{padding:0;border:0;}
#signin_submit:hover,#signin_submit:focus{background-position:0 -5px;cursor:pointer;}
.tipsy-inner{padding:10px 15px;line-height:1.5em;font-weight:bold;}
.tipsy{opacity:.8;filter:alpha(opacity=80);background-repeat:no-repeat;padding:5px;}
.tipsy-inner{padding:8px 8px;max-width:200px;font:11px 'Lucida Grande',sans-serif;font-weight:bold;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:#000;color:white;text-align:left;}
.tipsy-north{background-image:url(images/tipsy-north.gif);background-position:top center;}
.tipsy-south{background-image:url(images/tipsy-south.gif);background-position:bottom center;}
.tipsy-east{background-image:url(images/tipsy-east.gif);background-position:right center;}
.tipsy-west{background-image:url(images/tipsy-west.gif);background-position:left center;}

附件:下载该文件资源,减少时间成本(增值服务)