zoukankan      html  css  js  c++  java
  • div相对浏览器移动

    <%
        String path = request.getContextPath();
    %>
    <!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 charset="UTF-8">
        <title>无标题页</title>
        <style type="text/css">
        .scrolldiv{
        100px;
        height:200px;
        position:absolute;
        top:300px;
        left:30px;
        background-color:red;
        }
        </style>
        <script type="text/javascript" src="<%=path%>/bbs/js/jquery-1.10.2.js"></script>
    </head>
    <body style="2000px;height:8000px">
    <div class="scrolldiv" id="scrolldiv"></div>
    </body>
      <script type="text/javascript">
      var timer;
        $(function(){
            $(window).scroll(function(){
                clearInterval(timer);
                var topScroll=getScroll();
                var topDiv="1px";
                var top=topScroll+parseInt(topDiv);
                timer=setInterval(function(){
                        //$(".test").css("top", top+"px");
                         $(".scrolldiv").animate({"top":top},500);
                },500)
            })
        })
        function getScroll(){
                 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;  
                 }  
                 return bodyTop
        }
        </script>
    </html>

  • 相关阅读:
    Delphi中的接口和抽象类
    设计模式之六大原则
    C 标准库
    linux 管道和重定向
    linux c创建静态库(.a)
    一个C语言程序
    C#动态创建lambda表达式
    linq中order by 和group by (含lambda表达式实现)以及综合案例
    微信扫码登陆原理
    二维码扫码支付原理
  • 原文地址:https://www.cnblogs.com/zheh/p/4082552.html
Copyright © 2011-2022 走看看