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

Javascript 的addEventListener()及attachEvent()区别分析

May 21 Javascript

js css后面所带参数含义介绍

Aug 18 Javascript

jQuery设置指定网页元素宽度和高度的方法

Mar 25 Javascript

一种Javascript解释ajax返回的json的好方法(推荐)

Jun 02 Javascript

JS JSOP跨域请求实例详解

Jul 04 Javascript

jQuery的 $.ajax防止重复提交的两种方法(推荐)

Oct 14 Javascript

原生js实现秒表计时器功能

Feb 16 Javascript

jQuery实现的页面遮罩层功能示例【测试可用】

Oct 14 jQuery

使用jquery DataTable和ajax向页面显示数据列表的方法

Aug 09 jQuery

vue实现商品加减计算总价的实例代码

Aug 12 Javascript

mpvue+vant app搭建微信小程序的方法步骤

Feb 11 Javascript

react同构实践之实现自己的同构模板

Mar 13 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

一个分页的论坛

2006/10/09 PHP

PHP 文件上传进度条的两种实现方法的代码

2007/11/25 PHP

浅析php中如何在有限的内存中读取大文件

2013/07/02 PHP

WordPres对前端页面调试时的两个PHP函数使用小技巧

2015/12/22 PHP

用javascript实现的仿Flash广告图片轮换效果

2007/04/24 Javascript

用jquery实现自定义风格的滑动条实现代码

2011/04/26 Javascript

JS 自定义带默认值的函数

2011/07/21 Javascript

JS嵌套函数调用上下文的问题解决

2014/03/26 Javascript

javascript进行四舍五入方法汇总

2014/12/16 Javascript

js中hash和ico的关联分析

2015/02/05 Javascript

JavaScript实现重置表单（reset）的方法

2015/04/02 Javascript

使用JavaScript为Kindeditor自定义按钮增加Audio标签

2016/03/18 Javascript

深入浅出ES6之let和const命令

2016/08/25 Javascript

js格式化时间的简单实例

2016/11/27 Javascript

angularjs点击图片放大实现上传图片预览

2017/02/24 Javascript

Vue.2.0.5过渡效果使用技巧

2017/03/16 Javascript

详解Angular2组件之间如何通信

2017/06/22 Javascript

如何实现vue的tree组件

2020/12/03 Vue.js

pyqt4教程之messagebox使用示例分享

2014/03/07 Python

Python文件夹与文件的操作实现代码

2014/07/13 Python

python统计一个文本中重复行数的方法

2014/11/19 Python

在Python中使用__slots__方法的详细教程

2015/04/28 Python

django定期执行任务(实例讲解)

2017/11/03 Python

python 借助numpy保存数据为csv格式的实现方法

2018/07/04 Python

Python延时操作实现方法示例

2018/08/14 Python

Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例

2019/06/04 Python

Python安装依赖(包)模块方法详解

2020/02/14 Python

HTML5之多线程(Web Worker)

2019/01/02 HTML / CSS

软件测试笔试题

2012/10/25 面试题

怎样写好自荐信和推荐信

2013/12/26 职场文书

产品促销活动策划书

2014/01/15 职场文书

办公室主任先进事迹

2014/01/18 职场文书

经典公益广告词

2014/03/13 职场文书

2015年技术工作总结范文

2015/04/20 职场文书

社区志愿服务活动感想

2015/08/07 职场文书

opencv-python图像配准(匹配和叠加)的实现

2021/06/23 Python