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>

  • 相关阅读:
    单例模式
    Java多线程小例子(三个窗口卖火车票)
    HashMap和HashTable的区别
    javascript操作对象的方法
    javascript基本语法
    其他标签
    头标签
    label标签
    表单标签
    IO流-LineNumberReader
  • 原文地址:https://www.cnblogs.com/zheh/p/4082552.html
Copyright © 2011-2022 走看看