• JS jQuery右下浮动效果


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery.js"></script>
    <!--/*以为是上下滚动,所以搞改变滚动的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;
     }
     */
    -->

     
    <script type="text/javascript">
     jQuery(document).ready(
    function($){
         $(window).scroll(
    function() {
            
    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
            }
            
    var tmpHeight=((document.documentElement.clientHeight==0)?document.body.clientHeight:document.documentElement.clientHeight);
            $(
    "#hellobaby").css("top", tmpHeight-50 + bodyTop);
        });
        $(
    "#hellobaby").css("top", ((document.documentElement.clientHeight==0)?document.body.clientHeight:document.documentElement.clientHeight)-50);
     });

     
    </script>
     
    <style type="text/css">
     #hellobaby 
    {
     background
    :#000;
     color
    :#fff;
     border
    :1px solid #B3B3B3;
     font-size
    :14px;
     right
    :0;
     position
    :absolute;
     top
    :250px;
     opacity
    :.7;
     filter
    :alpha(opacity=70);
     padding
    :10px;
     
    }
     #hellobaby a 
    {
     color
    :orange;
     text-decoration
    :none;
     
    }
     .closebox 
    {
     position
    :absolute;
     right
    :5px;
     top
    :0;
     
    }
     
    </style>
     
    </head>
     
    <body>
     
    <div style="height:1600px;">
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
    <br/>
    </div>
    <div id="hellobaby">  
    <href="#">TOP</a>
    <div class="closebox"> <href="javascript:void(0)"onclick="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title="关闭">×</a> </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    poj 2312 Battle City
    poj 2002 Squares
    poj 3641 Pseudoprime numbers
    poj 3580 SuperMemo
    poj 3281 Dining
    poj 3259 Wormholes
    poj 3080 Blue Jeans
    poj 3070 Fibonacci
    poj 2887 Big String
    poj 2631 Roads in the North
  • 原文地址:https://www.cnblogs.com/skyblue/p/2109566.html
Copyright © 2020-2023  润新知