编程 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网页制作特殊效果用随机数

May 22 Javascript

jquery 的 $("#id").html() 无内容的解决方法

Jun 07 Javascript

鼠标焦点离开文本框时验证的js代码

Jul 19 Javascript

jquery与js函数冲突的两种解决方法

Sep 09 Javascript

JSON中双引号的轮回使用过程中一定要小心

Mar 05 Javascript

使用js获取地址栏参数的方法推荐(超级简单)

Jun 14 Javascript

懒加载实现的分页&&网站footer自适应

Dec 21 Javascript

jQuery滚动插件scrollable.js用法分析

May 25 jQuery

微信小程序canvas拖拽、截图组件功能

Sep 04 Javascript

用node撸一个监测复联4开售短信提醒的实现代码

Apr 10 Javascript

学习RxJS之JavaScript框架Cycle.js

Jun 17 Javascript

JavaScript实现网页跨年倒计时

Dec 02 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和数据库结合的一个简单的web实例代码分析（php初学者）

2011/07/28 PHP

CI框架中site_url()和base_url()的区别

2015/01/07 PHP

详解PHP处理密码的几种方式

2016/11/30 PHP

详解PHP中mb_strpos的使用

2018/02/04 PHP

jquery实现智能感知连接外网搜索

2013/05/21 Javascript

js获取IFRAME当前的URL的方法

2013/11/13 Javascript

javascript:json数据的页面绑定示例代码

2014/01/26 Javascript

js控制table合并具体实现

2014/02/20 Javascript

用unescape反编码得出汉字示例

2014/04/24 Javascript

HTML页面,测试JS对C函数的调用简单实例

2016/08/09 Javascript

微信小程序获取相册照片实例详解

2016/11/16 Javascript

js仿淘宝评价评分功能

2017/02/28 Javascript

微信小程序-getUserInfo回调的实例详解

2017/10/27 Javascript

用React实现一个完整的TodoList的示例代码

2017/10/30 Javascript

详解async/await 异步应用的常用场景

2019/05/13 Javascript

vue实现多个echarts根据屏幕大小变化而变化实例

2020/07/19 Javascript

Python实现的数据结构与算法之队列详解

2015/04/22 Python

Python实现pdf文档转txt的方法示例

2018/01/19 Python

Python 在字符串中加入变量的实例讲解

2018/05/02 Python

Windows 8.1 64bit下搭建 Scrapy 0.22 环境

2018/11/18 Python

python使用matplotlib画柱状图、散点图

2019/03/18 Python

python 视频逐帧保存为图片的完整实例

2019/12/10 Python

40个你可能不知道的Python技巧附代码

2020/01/29 Python

python标准库OS模块详解

2020/03/10 Python

TensorFlow2.1.0最新版本安装详细教程

2020/04/08 Python

Python使用xlrd实现读取合并单元格

2020/07/09 Python

CSS3制作文字半透明倒影效果的两种实现方式

2014/08/08 HTML / CSS

CSS3动画效果回调处理详解

2014/12/10 HTML / CSS

美国校服网上商店：French Toast

2019/10/08 全球购物

Hotels.com日本：国外和海外住宿，酒店预订

2019/12/13 全球购物

一道Delphi面试题

2016/10/28 面试题

大学生毕业自荐信

2013/10/10 职场文书

领导干部考察材料

2014/02/08 职场文书

前处理班长职位说明书

2014/03/01 职场文书

环保建议书400字

2014/05/14 职场文书

离婚答辩状怎么写

2015/05/22 职场文书