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

用JQuery调用Session的实现代码

Oct 29 Javascript

jQuery循环滚动展示代码可应用到文字和图片上

May 11 Javascript

兼容所有浏览器的js复制插件Zero使用介绍

Mar 19 Javascript

js下将阿拉伯数字每三位一逗号分隔(如：15000000转化为15,000,000)

Jun 02 Javascript

详解JavaScript对W3C DOM模版的支持情况

Jun 16 Javascript

深入学习JavaScript中的Rest参数和参数默认值

Jul 28 Javascript

纯JS打造网页中checkbox和radio的美化效果

Oct 13 Javascript

ajax级联菜单实现方法实例分析

Nov 28 Javascript

JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】

Sep 28 Javascript

Vue.js简易安装和快速入门（第二课）

Oct 17 Javascript

解决bootstrap中下拉菜单点击后不关闭的问题

Aug 10 Javascript

详解微信小程序之scroll-view的flex布局问题

Jan 16 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详解ASCII码对照表与字符转换

2011/12/05 PHP

使用JSON实现数据的跨域传输的php代码

2011/12/20 PHP

手把手教你打印出PDF(关于fpdf的简单应用)

2013/06/25 PHP

php一些错误处理的方法与技巧总结

2013/08/10 PHP

php获取网页标题和内容函数(不包含html标签)

2014/02/03 PHP

php基于jquery的ajax技术传递json数据简单实例

2016/04/15 PHP

Yii2实现增删改查后留在当前页的方法详解

2017/01/13 PHP

理解Javascript_03_javascript全局观

2010/10/11 Javascript

js获取鼠标位置实例详解

2015/12/09 Javascript

Vue.js 2.0 移动端拍照压缩图片上传预览功能

2017/03/06 Javascript

微信小程序 chooseImage选择图片或者拍照

2017/04/07 Javascript

使用ES6语法重构React代码详解

2017/05/09 Javascript

微信小程序表单验证插件WxValidate的二次封装功能（终极版）

2019/09/03 Javascript

vue切换菜单取消未完成接口请求的案例

2020/11/13 Javascript

vue $router和$route的区别详解

2020/12/02 Vue.js

python双向链表实现实例代码

2013/11/21 Python

详解python中的文件与目录操作

2017/07/11 Python

Python Matplotlib库安装与基本作图示例

2019/01/09 Python

python3.6下Numpy库下载与安装图文教程

2019/04/02 Python

Python实现计算文件MD5和SHA1的方法示例

2019/06/11 Python

python切片的步进、添加、连接简单操作示例

2019/07/11 Python

python Gunicorn服务器使用方法详解

2019/07/22 Python

解决pycharm下pyuic工具使用的问题

2020/04/08 Python

python urllib和urllib3知识点总结

2021/02/08 Python

澳大利亚冲浪和时尚服装网上购物：SurfStitch

2017/07/29 全球购物

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

2018/06/01 全球购物

MyHeritage美国：家族史研究和DNA测试的领先服务

2019/05/27 全球购物

Madda Fella官网：美国冒险家服装品牌

2020/01/16 全球购物

医学生个人求职信范文

2013/09/24 职场文书

读书月活动方案

2014/05/22 职场文书

四风问题专项整治工作情况报告

2014/10/28 职场文书

营销与策划实训报告

2014/11/05 职场文书

2014年学校办公室工作总结

2014/12/19 职场文书

语文教师求职信范文

2015/03/20 职场文书

给朋友的赠语

2015/06/23 职场文书

SQL SERVER存储过程用法详解

2022/02/24 SQL Server