<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;width: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>

jquery控制div随滚动条滚动效果的更多相关文章

  1. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  2. 设置DIV随滚动条滚动而滚动

    有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  3. 用jquery实现平滑的页面滚动效果

    通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...

  4. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  5. jQuery---鼠标滚轮控制div横向滚动条左右移动

    HTML <div class="table-responsive"> <div class="fhtable" style="wi ...

  6. jQuery 随滚动条滚动效果 （适用于内容页长文章）

    直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 ...

  7. jQuery实现将div中滚动条滚动到指定位置的方法

    1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...

  8. jQuery 随滚动条滚动效果 （固定版）

    //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mai ...

  9. JS 怎么控制某个div的滚动条滚动到顶部？ （已解决）

    获取这个元素,然后设置它的滚动条的位置为初始位置(0,0). document.getElementById(..).scrollTop = 0;

随机推荐

  1. 原生的AJAX

    var XHR=null; if (window.XMLHttpRequest) { // 非IE内核 XHR = new XMLHttpRequest(); } else if (window.Ac ...

  2. JAVA基础第七组（5道题）

    31.题目:将一个数组逆序输出.              1.程序分析:用第一个与最后一个交换. package com.niit.homework1; /** * @author: Annie * ...

  3. 团队作业4——第一次项目冲刺（Alpha版本）4th day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 计时功能已经完成,然后24点的代码如何在游戏界面与界面组件联系上正在进行. 四.困难与问题 1.在安卓框架与java代码的结合 ...

  4. 201521123069 《Java程序设计》 第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  5. 201521123031 《Java程序设计》第一周学习总结

    1. 本周学习总结 a.使用notepad++和eclipse编写程序b.对jav的运行环境jdk.jre有了初步的认识c.学习如何使用码云代码库 2. 书面作业 Q1.为什么java程序可以跨平台运 ...

  6. 201521123044 《Java程序设计》第9周学习总结

    1. 本章学习总结 2. 书面作业 本次PTA作业题集异常 1.常用异常题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免 ...

  7. 201521123075 《Java程序设计》第9周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避 ...

  8. dbda数据库类

    <?phpclass DBDA{ public $host="localhost";//服务器地址 public $uid="root";//用户名 pu ...

  9. JAVA设计模式：蝇量模式

    声明:转载请说明来源:http://www.cnblogs.com/pony1223/p/7554686.html 一.引出蝇量模式 现在假设有一个项目,这个项目是为公园设计一个景观的部署,那么这个时 ...

  10. Oracle存储过程 一个具体实例

    表结构信息,并不是用oracle描述的,但是后面的存储过程是针对oracle的 ----------------个人交易流水表----------------------------------- c ...