zoukankan      html  css  js  c++  java
  • jquery控制div随滚动条滚动效果

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jquery div随滚动条滚动效果</title>
        <script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $(window).scroll(function () {
                    var top = $(window).scrollTop() + 200;
                    var left = $(window).scrollLeft() + 320;
                    $("#editInfo").animate({ "top": top }, 30);  //方式一  效果比较理想
                    //$("#editInfo").css({ left: left + "px", top: top + "px" });  方式二 有阴影
                });
            }); 
        </script>
    </head>
    <body>
        <div id="editInfo" style="float:left;300px; height:200px; background-color:#a10000;position:absolute;top:200px;"></div>
        <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 /><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 /><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 /><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 /><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 />
        <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 /><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 /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
    </body>
    </html>
    

  • 相关阅读:
    linux命令学习笔记:cut详解
    浏览器url传参中文时得到null的解决方法
    jQuery给控件赋值....
    Myeclipse 错误An internal error has occurred 解决办法
    浏览器发送URL的编码特性
    DEBUG -- CLOSE BY CLIENT STACK TRACE问题的两种解决方案,整理自网络
    解决Maven中OutOfMemory错误
    java中的URLEncoder和URLDecoder类;中文在地址栏中的处理
    关于CLOSE BY CLIENT STACK TRACE
    Hibernate复合主键映射
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234145.html
Copyright © 2011-2022 走看看