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>
    

  • 相关阅读:
    Spring——注解代替XML配置文件,Spring与JUnit整合
    Spring——基本概念(IOC,DI思想),Spring配置文件(XML),属性注入,Spring与Web项目结合
    Struts——自定义拦截器
    Struts——OGNL表达式与Struts2结合
    Struts2——结果跳转方式配置(重定向,转发<默认>,重定向到方法,重定向到转发),获取servlet的内些API(request,servletcontext...),获取参数
    Struts2——基本使用与配置文件
    基于中间件的RBAC权限控制
    Django
    Django
    Django 中 admin 的执行流程
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234145.html
Copyright © 2011-2022 走看看