zoukankan      html  css  js  c++  java
  • jquery实现浮动层效果

    层可以随着页面滚动而滚动,说明肯定是脱离了标准流的,CSS样式表 position:absolute;因为是上下移动,所以
    就是要改变层的CSS样式中的top属性定位),在jquery中有一个scrollTop属性,用于获取页面滚动的高度。所以在每次页面滚动
    的时候,将浮动层的高度设置为 (初始值)+ scrollTop即可。  但是scrollTop在ie和其他浏览器中的获取有不一样,可以通过
    如下方式
    :       var bodyTop = 0;
                if (typeof window.pageYOffset != 'undefined') {
                    bodyTop = window.pageYOffset; 
              } else if (
    typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
    {                bodyTop = document.documentElement.scrollTop;            }
                else if (typeof document.body != 'undefined') { 
                  bodyTop = document.body.scrollTop; 
              }

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2  <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5 <title>无标题文档</title>
    6 <script type="text/javascript" src="../jquery-1.3.1.js"></script>
    7 <!--/*以为是上下滚动,所以搞改变滚动的top属性(绝对定位),在jquery中有一个scrollTop属性,用于获取页面滚动的高度。所以在每次页面滚动的时候,将浮动层的高度设置为 (初始值)+ scrollTop即可。
    8
    9 但是scrollTop在ie和其他浏览器中的获取有不一样,可以通过如下方式:
    10 var bodyTop = 0;
    11 if (typeof window.pageYOffset != 'undefined') {
    12 bodyTop = window.pageYOffset;
    13 } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
    14 bodyTop = document.documentElement.scrollTop;
    15 }
    16 else if (typeof document.body != 'undefined') {
    17 bodyTop = document.body.scrollTop;
    18 }
    19 */-->
    20
    21 <script type="text/javascript">
    22 jQuery(document).ready(function($){
    23 $(window).scroll(function() {
    24 var bodyTop = 0;
    25 if (typeof window.pageYOffset != 'undefined') {
    26 bodyTop = window.pageYOffset
    27 } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
    28 bodyTop = document.documentElement.scrollTop
    29 } else if (typeof document.body != 'undefined') {
    30 bodyTop = document.body.scrollTop
    31 }
    32 $("#hellobaby").css("top", 250 + bodyTop)
    33 });
    34 });
    35
    36 </script>
    37 <style type="text/css">
    38 #hellobaby {
    39 background:#000;
    40 color:#fff;
    41 border:1px solid #B3B3B3;
    42 font-size:14px;
    43 right:0;
    44 position:absolute;
    45 top:250px;
    46 opacity:.7;
    47 filter:alpha(opacity=70);
    48 padding:10px;
    49 }
    50 #hellobaby a {
    51 color:orange;
    52 text-decoration:none;
    53 }
    54 .closebox {
    55 position:absolute;
    56 right:5px;
    57 top:0;
    58 }
    59 </style>
    60 </head>
    61 <body>
    62 <div style="height:1600px;">
    63 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    64 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    65 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    66 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    67 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    68 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    69 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    70 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    71 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    72 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    73 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    74 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    75 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    76 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    77 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    78 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    79 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    80 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    81 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    82 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    83 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    84 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    85 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    86 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    87 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    88 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    89 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    90 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    91 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    92 </div>
    93 <div id="hellobaby"> 推荐您 <a href="http://www.ilovebeyond.com" target="_blank">点击这里</a> 订阅我爱beyond网 o(∩_∩)o
    94 <div class="closebox"> <a href="javascript:void(0)"onclick="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title="关闭">×</a> </div>
    95 </div>
    96 </body>
    97 </html>
  • 相关阅读:
    【codevs1690】开关灯 (线段树 区间修改+区间求和 (标记))
    【codevs1191】数轴染色 (线段树 区间修改+固定区间查询)
    【机器学习】李航 统计学习方法 知识点总结
    【机器学习】生成模型 判别模型
    【机器学习】贝叶斯定理、精准推断、最大似然估计、连续特征参数估计、EM算法
    python queue 讲解
    【tensorflow】 CNN卷积神经网络原理讲解+图片识别应用(附源码)
    URL解析过程
    Python 可迭代对象迭代器生成器的区别
    【Linux】 修改主机名
  • 原文地址:https://www.cnblogs.com/beyond1990/p/2072956.html
Copyright © 2011-2022 走看看