• 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>

  • 相关阅读:
    VirtualBox安装及使用说明和虚拟机安装XP系统图文教程
    jbpm入门样例
    39个让你受益的HTML5教程
    JAVA反射机制
    怎样学好C语言,一个成功人士的心得!
    golang使用pprof检查goroutine泄露
    GridView编辑删除操作
    初识Servlet
    严苛模式(StrictMode)
    严苛模式(StrictMode)
  • 原文地址:https://www.cnblogs.com/zheh/p/4082552.html
Copyright © 2020-2023  润新知