编程 Javascript

jQuery控制div实现随滚动条滚动效果

Posted in Javascript onJune 07, 2016

本文实例讲述了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;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程序设计有所帮助。

- Author -

smartsmile2012

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

写了一个layout，拖动条连贯，内容区可为iframe

Aug 19 Javascript

用函数式编程技术编写优美的 JavaScript_ibm

May 16 Javascript

javascript window.confirm确认取消对话框实现代码小结

Oct 21 Javascript

通过pjax实现无刷新翻页(兼容新版jquery)

Jan 31 Javascript

js调用iframe实现打印页面内容的方法

Mar 04 Javascript

Js Jquery创建一个弹出层可加载一个页面

May 08 Javascript

使用JavaScript制作一个简单的计数器的方法

Jul 07 Javascript

jQuery 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween

Dec 03 Javascript

vue todo-list组件发布到npm上的方法

Apr 04 Javascript

纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

Jun 23 Javascript

vue-cli脚手架的安装教程图解

Sep 02 Javascript

Vue实现跑马灯样式文字横向滚动

Nov 23 Vue.js

bootstrap输入框组代码分享

Jun 07 #Javascript

javascript 数组的定义和数组的长度

Jun 07 #Javascript

jQuery实现按钮点击遮罩加载及处理完后恢复的效果

Jun 07 #Javascript

原生js三级联动的简单实现代码

Jun 07 #Javascript

AngularJS 遇到的小坑与技巧小结

Jun 07 #Javascript

模仿password输入框的实现代码

Jun 07 #Javascript

无缝滚动的简单实现代码(推荐)

Jun 07 #Javascript

You might like

由php if 想到的些问题

2008/03/22 PHP

Array of country list in PHP with Zend Framework

2011/10/17 PHP

PHP中设置时区，记录日志文件的实现代码

2013/01/07 PHP

解析arp病毒背后利用的Javascript技术附解密方法

2007/08/06 Javascript

javascript 数组学习资料收集

2010/04/11 Javascript

js 设置选中行的样式的实现代码

2010/05/24 Javascript

javascript与CSS复习(三)

2010/06/29 Javascript

javascript 广告后加载，加载完页面再加载广告

2010/11/25 Javascript

Jquery 一次处理多个ajax请求的代码

2011/09/02 Javascript

jQuery标签编辑插件Tagit使用指南

2015/04/21 Javascript

PHP结合jQuery实现红蓝投票功能特效

2015/07/22 Javascript

jQuery实现右下角可缩放大小的层完整实例

2016/06/20 Javascript

Angular外部使用js调用Angular控制器中的函数方法或变量用法示例

2016/08/05 Javascript

Javascript中this绑定的3种方法与比较

2016/10/13 Javascript

JS去除字符串中空格的方法

2017/02/14 Javascript

jQuery插件zTree实现更新根节点中第i个节点名称的方法示例

2017/03/08 Javascript

JavaScript实现的冒泡排序法及统计相邻数交换次数示例

2017/04/26 Javascript

分分钟学会vue中vuex的应用（入门教程）

2017/09/14 Javascript

Vue常见面试题整理【值得收藏】

2018/09/20 Javascript

vue项目引入Iconfont图标库的教程图解

2018/10/24 Javascript

JS实现获取数组中最大值或最小值功能示例

2019/03/02 Javascript

vue-i18n结合Element-ui的配置方法

2019/05/20 Javascript

简单了解常用的JavaScript 库

2020/07/16 Javascript

[13:25]VP vs VICI (BO3)

2018/06/07 DOTA

使用Python中的cookielib模拟登录网站

2015/04/09 Python

python网络编程之数据传输UDP实例分析

2015/05/20 Python

OPENCV去除小连通区域,去除孔洞的实例讲解

2018/06/21 Python

Python对接六大主流数据库(只需三步)

2019/07/31 Python

pandas DataFrame 数据选取，修改，切片的实现

2020/04/24 Python

Python txt文件常用读写操作代码实例

2020/08/03 Python

详解如何在css中引入自定义字体(font-face)

2018/05/17 HTML / CSS

linux面试题参考答案（9）

2016/01/29 面试题

后勤人员岗位职责

2013/12/17 职场文书

2014社会治安综合治理工作总结

2014/12/04 职场文书

营销计划书范文

2015/01/17 职场文书

昆虫记读书笔记

2015/06/26 职场文书