zoukankan      html  css  js  c++  java

  • 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">  
    <a href="#">TOP</a>
    <div class="closebox"> <a href="javascript:void(0)"onclick="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title="关闭">×</a> </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    React Native 实现MQTT 推送调研 (1)
    bpmn的依赖注入
    vdom diff
    浏览器渲染与event loop
    uni-app 通过后缀名区分不同渠道版本
    网页定宽 栅格布局
    网页顶部菜单导航和左侧菜单导航的区别？
    Android利用tcpdump和wireshark抓取网络数据包
    就算做了
    我眼中的Serverless
  • 原文地址：https://www.cnblogs.com/skyblue/p/2109566.html
Copyright © 2011-2022 走看看