今天看到一个网站的jQuesr效果不错。扒了。发现其实很简单的。
1 <style> 2 .yk_login { 3 100%; 4 float: left; 5 height: 100px; 6 position: fixed; 7 bottom: 0; 8 left: 0; 9 overflow: hidden; 10 z-index: 9999; 11 _position: absolute; 12 _bottom: auto; 13 _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) 14 } 15 .yk_login .pos_re { 16 100%; 17 float: left; 18 height: 100px; 19 position: relative 20 } 21 .yk_login .pos_re .black { 22 filter: alpha(opacity=70); 23 opacity: .7; 24 -moz-opacity: .7; 25 -khtml-opacity: .7; 26 100%; 27 float: left; 28 z-index: 100; 29 background: #000; 30 display: block; 31 position: absolute; 32 left: 0; 33 top: 0; 34 height: 100px 35 } 36 .yk_login .pos_re .yk_area { 37 940px; 38 margin: 0 auto; 39 height: 100px; 40 position: relative; 41 z-index: 200 42 } 43 .yk_area h2 { 44 color: #fff; 45 font-size: 20px; 46 float: left; 47 font-family: "微软雅黑"; 48 margin-top: 42px; 49 margin-right: 10px; 50 display: inline 51 } 52 .yk_area span { 53 float: left; 54 margin-top: 38px 55 } 56 .yk_area span a { 57 150px; 58 height: 31px; 59 display: block; 60 overflow: hidden; 61 float: left; 62 margin-left: 10px; 63 display: inline 64 } 65 .yk_area em { 66 float: right; 67 margin-top: 40px 68 } 69 .yk_area em a { 70 color: #3e8bd9; 71 font-size: 16px; 72 font-family: "微软雅黑" 73 } 74 .yk_area p { 75 float: right; 76 margin-top: 36px; 77 margin-left: 10px; 78 display: inline 79 } 80 .yk_area p a { 81 30px; 82 height: 30px; 83 overflow: hidden; 84 display: block; 85 background: url(../images/web2/all_btns.gif) no-repeat -770px 0 86 } 87 </style> 88 89 <script type="text/javascript" src="https://files.cnblogs.com/banbu/jquery-1.6.3.min.js"></script> 90 <script type="text/javascript"> 91 92 $(document).ready(function() { 93 94 if ($("div.yk_login").length > 0) { 95 setTimeout(function() { 96 $("div.yk_login").show().animate({ 97 bottom: "+=100" 98 }, 99 1000) 100 }, 101 1000); 102 $("div.yk_area > p > a").click(function() { 103 var a = $(this).parent().parent().parent().parent(); 104 a.animate({ 105 bottom: "+=-100" 106 }, 107 800, 108 function() { 109 a.remove() 110 }) 111 }) 112 } 113 }); 114 115 function bindMouseHover() { 116 $(".mouseHover").mouseenter(function() { 117 mouseHover(this, true) 118 }).mouseleave(function() { 119 mouseHover(this, false) 120 }) 121 }; 122 </script> 123 124 125 <div class="yk_login" style="display: none;bottom: -100px;"> 126 <div class="pos_re"><!----> 127 <div class="yk_area"> 128 <h2>111111111111111111111</h2> 129 <span> 130 <a href="javascript:void(0);" class="login-btn" title="使用微博账号登录" go-uri="/web/login/6"><img src="http://www.cnblogs.com/img.51juzhai.com/images/web2/login_btn.png" /></a> 131 <a href="javascript:void(0);" class="login-btn" title="使用豆瓣账号登录" go-uri="/web/login/7"><img src="http://www.cnblogs.com/img.51juzhai.com/images/web2/db_login_btn.png" /></a> 132 133 134 135 <a href="javascript:void(0);" title="使用QQ账号登录" go-uri="/web/login/8" class="login-btn"><img src="http://www.cnblogs.com/img.51juzhai.com/images/web2/qq_login_btn.png" /></a> 136 137 138 </span> 139 <p><a href="javascript:void(0);"></a></p> 140 <em><a href="../passport/register">注册账号</a></em> 141 </div> 142 <div class="black"></div> 143 </div><!----> 144 </div>