编程 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 相关文章推荐

网页自动刷新，不产生嗒嗒声的一个解决方法

Mar 27 Javascript

jQuery 表单验证扩展代码(二)

Oct 20 Javascript

提升你网站水平的jQuery插件集合推荐

Apr 19 Javascript

Javascript跨域请求的4种解决方式

Mar 17 Javascript

JavaScript中模拟实现jsonp

Jun 19 Javascript

window.onload绑定多个事件的两种解决方案

May 15 Javascript

bootstrap table使用入门基本用法

May 24 Javascript

JavaScript仿微信（电话）联系人列表滑动字母索引实例讲解（推荐）

Aug 16 Javascript

Bootbox将后台JSON数据填充Form表单的实例代码

Sep 10 Javascript

JS+canvas画布实现炫酷的旋转星空效果示例

Feb 13 Javascript

JS猜数字游戏实例讲解

Jun 30 Javascript

node.js如何操作MySQL数据库

Oct 29 Javascript

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

把77A收信机改造成收音机

2021/03/02 无线电

phpmailer发送gmail邮件实例详解

2013/06/24 PHP

javascript实现轮显新闻标题链接

2007/08/13 Javascript

js 多浏览器分别判断代码

2010/04/01 Javascript

JS date对象的减法处理实现代码

2010/12/28 Javascript

javascript 进阶篇1 正则表达式，cookie管理，userData

2012/03/14 Javascript

jQuery控制iFrame(实例代码)

2013/11/19 Javascript

jQuery.parseJSON(json)将JSON字符串转换成js对象

2014/07/27 Javascript

jquery显示loading图片直到网页加载完成的方法

2015/06/25 Javascript

javascript实现类似java中getClass()得到对象类名的方法

2015/07/27 Javascript

jQuery实现非常实用漂亮的select下拉菜单选择效果

2015/11/06 Javascript

jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

2016/06/12 Javascript

canvas+gif.js打造自己的数字雨头像的示例代码

2017/10/26 Javascript

详解Vue2 SSR 缓存 Api 数据

2017/11/20 Javascript

基于Vue的移动端图片裁剪组件功能

2017/11/28 Javascript

VUEJS 2.0 子组件访问/调用父组件的实例

2018/02/10 Javascript

Angular如何在应用初始化时运行代码详解

2018/06/11 Javascript

读懂CommonJS的模块加载

2019/04/19 Javascript

JS实现的碰撞检测与周期移动完整示例

2019/09/02 Javascript

ant design 日期格式化的实现

2020/10/27 Javascript

解决vue项目打包上服务器显示404错误,本地没出错的问题

2020/11/03 Javascript

[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱

2016/03/25 DOTA

[00:31]2016完美“圣”典风云人物：国士无双宣传片

2016/12/04 DOTA

对Python的zip函数妙用,旋转矩阵详解

2018/12/13 Python

Python 实现两个服务器之间文件的上传方法

2019/02/13 Python

在交互式环境中执行Python程序过程详解

2019/07/12 Python

Python面向对象程序设计之继承、多态原理与用法详解

2020/03/23 Python

python用700行代码实现http客户端

2021/01/14 Python

英国优质家居用品网上品牌：URBANARA

2018/06/01 全球购物

英国领先的在线高尔夫设备零售商：Golfgeardirect

2020/12/11 全球购物

报社实习生自荐信

2014/01/24 职场文书

致200米运动员广播稿

2014/02/06 职场文书

2014年质量管理工作总结

2014/12/01 职场文书

2015年师德师风自我评价范文

2015/03/05 职场文书

观看《筑梦中国》纪录片心得体会

2016/01/18 职场文书

Jupyter notebook 不自动弹出网页的解决方案

2021/05/21 Python