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

摘自启点的main.js

Apr 20 Javascript

JS中取二维数组中最大值的方法汇总

Apr 17 Javascript

浅析JS中对函数function的理解(基础篇)

Oct 14 Javascript

JS高级运动实例分析

Dec 20 Javascript

vue中的event bus非父子组件通信解析

Oct 27 Javascript

vue+iview写个弹框的示例代码

Dec 05 Javascript

js实现敏感词过滤算法及实现逻辑

Jul 24 Javascript

Angular4.x Event (DOM事件和自定义事件详解)

Oct 09 Javascript

jQuery实现左右两个列表框的内容相互移动功能示例

Jan 27 jQuery

浅谈layui使用模板引擎动态渲染元素要注意的问题

Sep 14 Javascript

vue.js路由mode配置之去掉url上默认的#方法

Nov 01 Javascript

vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

Feb 14 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实现的返回数据格式化类实例

2014/09/22 PHP

PHP微信红包API接口

2015/12/05 PHP

自制PHP框架之设计模式

2017/05/07 PHP

thinkphp5.1框架容器与依赖注入实例分析

2019/07/23 PHP

比较全的JS checkbox全选、取消全选、删除功能代码

2008/12/19 Javascript

jQuery中创建实例与原型继承揭秘

2011/12/21 Javascript

100个不能错过的实用JS自定义函数

2014/03/05 Javascript

Html5的placeholder属性(IE兼容)实现代码

2014/08/30 Javascript

jquery datatable服务端分页

2016/08/31 Javascript

AngularJS 单选框及多选框的双向动态绑定

2017/04/20 Javascript

小程序实现选择题选择效果

2018/11/04 Javascript

浅析vue中的MVVM实现原理

2019/03/04 Javascript

如何使用RoughViz可视化Vue.js中的草绘图表

2021/01/30 Vue.js

[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场

2018/04/10 DOTA

使用Python的Django框架结合jQuery实现AJAX购物车页面

2016/04/11 Python

Python更新数据库脚本两种方法及对比介绍

2017/07/27 Python

利用python实现微信头像加红色数字功能

2018/03/26 Python

使用python实现http及ftp服务进行数据传输的方法

2018/10/26 Python

Django--权限Permissions的例子

2019/08/28 Python

Python3 全自动更新已安装的模块实现

2020/01/06 Python

Python 输出详细的异常信息(traceback)方式

2020/04/08 Python

Python urllib.request对象案例解析

2020/05/11 Python

如何理解python中数字列表

2020/05/29 Python

简单的命令查看安装的python版本号

2020/08/28 Python

canvas绘制图片drawImage使用方法

2020/09/15 HTML / CSS

会计实习期自我鉴定

2013/10/06 职场文书

本科生的职业生涯规划范文

2014/01/09 职场文书

通用自荐信范文

2014/03/14 职场文书

《冬阳童年骆驼队》教学反思

2014/04/15 职场文书

2014年干部作风建设总结

2014/10/23 职场文书

怎样写辞职信

2015/02/27 职场文书

学术会议通知

2015/04/15 职场文书

2015年试用期工作总结范文

2015/05/28 职场文书

工作简报格式范文

2015/07/21 职场文书

旷工检讨书大全

2015/08/15 职场文书

Java设计模式中的命令模式

2022/04/28 Java/Android