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

Ext 今日学习总结

Sep 19 Javascript

JSDoc 介绍使用规范JsDoc的使用介绍

Feb 12 Javascript

JS日期和时间选择控件升级版(自写)

Aug 02 Javascript

JavaScript移除数组元素减少长度的方法

Sep 05 Javascript

js 实现菜单左右滚动显示示例介绍

Nov 21 Javascript

javascript 回调函数详解

Nov 11 Javascript

JavaScript中的异常捕捉介绍

Dec 31 Javascript

Javascript中拼接大量字符串的方法

Feb 05 Javascript

详解angularJs指令的3种绑定策略

Apr 13 Javascript

详解webpack分离css单独打包

Jun 21 Javascript

vue-preview动态获取图片宽高并增加旋转功能的实现

Jul 29 Javascript

TypeScript 内置高级类型编程示例

Sep 23 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

php获取数组长度的方法（有实例）

2013/10/27 PHP

ThinkPHP模板IF标签用法详解

2014/07/01 PHP

jquery mobile动态添加元素之后不能正确渲染解决方法说明

2014/03/05 Javascript

jQuery插件简单学习实例教程

2016/07/01 Javascript

js仿百度切换皮肤功能（html+css）

2016/07/10 Javascript

js判断checkbox是否选中个数的方法(超简单)

2016/08/19 Javascript

jquery实现图片列表鼠标移入微动

2016/12/01 Javascript

详解vue数据渲染出现闪烁问题

2017/06/29 Javascript

vue实现选项卡及选项卡切换效果

2018/04/24 Javascript

Vue封装的可编辑表格插件方法

2018/08/28 Javascript

Vue-Router的使用方法

2018/09/05 Javascript

node.js学习笔记之koa框架和简单爬虫练习

2018/12/13 Javascript

vuex 实现getter值赋值给vue组件里的data示例

2019/11/05 Javascript

[00:32]2016完美“圣”典风云人物：Maybe宣传片

2016/12/05 DOTA

Python中urllib+urllib2+cookielib模块编写爬虫实战

2016/01/20 Python

在Python的Flask中使用WTForms表单框架的基础教程

2016/06/07 Python

python中matplotlib的颜色及线条控制的示例

2018/03/16 Python

浅谈配置OpenCV3 + Python3的简易方法(macOS)

2018/04/02 Python

python中plot实现即时数据动态显示方法

2018/06/22 Python

在Python中居然可以定义两个同名通参数的函数

2019/01/31 Python

python3 自动识别usb连接状态,即对usb重连的判断方法

2019/07/03 Python

使用python爬取抖音视频列表信息

2019/07/15 Python

如何通过python的fabric包完成代码上传部署

2019/07/29 Python

python利用openpyxl拆分多个工作表的工作簿的方法

2019/09/27 Python

python列表推导式入门学习解析

2019/12/02 Python

scrapy爬虫:scrapy.FormRequest中formdata参数详解

2020/04/30 Python

高级护理专业毕业生推荐信

2013/12/25 职场文书

社团成立邀请函

2014/01/08 职场文书

暑期社会实践学生的自我评价

2014/01/09 职场文书

七年级英语教学反思

2014/01/15 职场文书

2014年团员学习十八大思想汇报

2014/09/13 职场文书

2014年幼儿园后勤工作总结

2014/11/10 职场文书

大学学生会主席竞选稿怎么写？

2019/08/19 职场文书

62句有关感恩节文案（推荐收藏）

2019/11/28 职场文书

如何设计高效合理的MySQL查询语句

2021/05/26 MySQL

MySQL数据库安全管理

2022/05/06 MySQL