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

(function(){})()的用法与优点

Mar 11 Javascript

QUnit jQuery的TDD框架

Nov 04 Javascript

javascript不可用的问题探究

Oct 01 Javascript

javascript模拟地球旋转效果代码实例

Dec 02 Javascript

javascript实例--教你实现扑克牌洗牌功能

May 15 Javascript

JavaScript中的toLocaleDateString()方法使用简介

Jun 12 Javascript

谈谈JavaScript异步函数发展历程

Sep 29 Javascript

js中对函数设置默认参数值的3种方法

Oct 23 Javascript

Javascript实现购物车功能的详细代码

May 08 Javascript

vue 本地环境跨域请求proxyTable的方法

Sep 19 Javascript

详解webpack引入第三方库的方式以及注意事项

Jan 15 Javascript

解决layui 三级联动下拉框更新时回显的问题

Sep 03 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/06/17 PHP

php使用socket post数据到其它web服务器的方法

2015/06/02 PHP

jQuery 判断页面元素是否存在的代码

2009/08/14 Javascript

关于跨站脚本攻击问题

2011/12/22 Javascript

JavaScript中的稀疏数组与密集数组[译]

2012/09/17 Javascript

jQuery绑定事件不执行但alert后可以正常执行

2014/06/03 Javascript

JavaScript字符串对象substr方法入门实例（用于截取字符串）

2014/10/16 Javascript

jQuery基础知识点总结(必看)

2016/05/31 Javascript

在JS中a标签加入单击事件屏蔽href跳转页面

2016/12/16 Javascript

jQuery中DOM节点删除之empty与remove

2017/01/20 Javascript

Vue获取DOM元素样式和样式更改示例

2017/03/07 Javascript

AngularJS实现tab选项卡的方法详解

2017/07/05 Javascript

js 获取json数组里面数组的长度实例

2017/10/31 Javascript

浅谈react 同构之样式直出

2017/11/07 Javascript

Vue.js实现列表清单的操作方法

2017/11/15 Javascript

webpack多入口多出口的实现方法

2018/08/17 Javascript

微信小程序实现文件、图片上传功能

2020/08/18 Javascript

layui 表格操作列按钮动态显示的实现方法

2019/09/06 Javascript

js实现左右轮播图

2020/01/09 Javascript

微信小程序图片自适应实现解析

2020/01/21 Javascript

使用Python编写vim插件的简单示例

2015/04/17 Python

简单介绍Python中的try和finally和with方法

2015/05/05 Python

Python基于sklearn库的分类算法简单应用示例

2018/07/09 Python

在python下使用tensorflow判断是否存在文件夹的实例

2019/06/10 Python

python 使用while循环输出*组成的菱形实例

2020/04/12 Python

基于Python实现简单学生管理系统

2020/07/24 Python

使用CSS3编写类似iOS中的复选框及带开关的按钮

2016/04/11 HTML / CSS

3种方式实现瀑布流布局小结

2019/09/05 HTML / CSS

迷你分体式空调：SoGoodToBuy

2018/08/07 全球购物

SQL Server提供的3种恢复模型都是什么？有什么区别？

2012/05/13 面试题

市级三好学生事迹材料

2014/08/27 职场文书

检讨书格式

2015/05/07 职场文书

工商行政处罚决定书

2015/06/24 职场文书

2015年四年级班主任工作总结

2015/10/22 职场文书

2019年作为一名实习生的述职报告

2019/09/29 职场文书

解析探秘fescar分布式事务实现原理

2022/02/28 Java/Android