屏幕锁定元素，随之滚屏。

今天看到一个网站的jQuesr效果不错。扒了。发现其实很简单的。

 

 

  1 <style>
  2 .yk_login {
  3     width: 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     width: 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     width: 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     width: 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     width: 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     width: 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>
posted @ 2012-09-23 20:41  banbu  阅读(437)  评论(0)  编辑  收藏  举报