编程 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中的Array数组对象详谈

Mar 03 Javascript

jQuery on方法传递参数示例

Dec 09 Javascript

Javascript中使用A标签获取当前目录的绝对路径方法

Mar 02 Javascript

js实现使用鼠标拖拽切换图片的方法

May 04 Javascript

jqGrid表格应用之新增与删除数据附源码下载

Dec 02 Javascript

图解js图片轮播效果

Dec 20 Javascript

AngularJS入门教程之Scope(作用域)

Jul 27 Javascript

Javascript中apply、call、bind的巧妙使用

Aug 18 Javascript

AngularJS之自定义服务详解(factory、service、provider)

Apr 14 Javascript

Vue之Watcher源码解析（1）

Jul 19 Javascript

vue超时计算的组件实例代码

Jul 09 Javascript

js实现弹幕墙效果

Dec 10 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动态柱状图实现方法

2015/03/30 PHP

php实现阳历阴历互转的方法

2015/10/28 PHP

PHP whois查询类定义与用法示例

2019/04/03 PHP

ExtJS 2.0实用简明教程之应用ExtJS

2009/04/29 Javascript

jQuery 1.2.x 升? 1.3.x 注意事项

2009/05/06 Javascript

IE6图片加载的一个BUG解决方法

2010/07/13 Javascript

Jquery操作radio的简单实例

2014/01/06 Javascript

JS按回车键实现登录的方法

2014/08/25 Javascript

JS实现先显示大图后自动收起显示小图的广告代码

2015/09/04 Javascript

Jquery ui datepicker设置日期范围，如只能隔3天【实现代码】

2016/05/04 Javascript

Bootstrap教程JS插件弹出框学习笔记分享

2016/05/17 Javascript

浅谈JS运算符&&和|| 及其优先级

2016/08/10 Javascript

详解如何使用Vue2做服务端渲染

2017/03/29 Javascript

浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

2017/06/25 Javascript

vue 使用Jade模板写html,stylus写css的方法

2018/02/23 Javascript

vscode中vue-cli项目es-lint的配置方法

2018/07/30 Javascript

详解基于mpvue微信小程序下载远程图片到本地解决思路

2019/05/16 Javascript

监控Nodejs的性能实例代码

2019/07/02 NodeJs

javascript设计模式 ? 策略模式原理与用法实例分析

2020/04/21 Javascript

零基础写python爬虫之urllib2使用指南

2014/11/05 Python

windows下pycharm安装、创建文件、配置默认模板

2018/07/31 Python

解决python "No module named pip" 的问题

2018/10/13 Python

Python 限制线程的最大数量的方法(Semaphore)

2019/02/22 Python

详解Python网络框架Django和Scrapy安装指南

2019/04/01 Python

Python数据类型之列表和元组的方法实例详解

2019/07/08 Python

python实现beta分布概率密度函数的方法

2019/07/08 Python

Python 使用xlwt模块将多行多列数据循环写入excel文档的操作

2020/11/10 Python

Agoda.com官方网站：便宜预订全球酒店，高达80%的折扣

2018/04/04 全球购物

介绍下Lucene建立索引的过程

2016/03/02 面试题

党员教师个人对照检查材料（群众路线）

2014/09/26 职场文书

2015初中团支部工作总结

2015/07/21 职场文书

春节随笔

2015/08/15 职场文书

2016幼儿园毕业感言

2015/12/08 职场文书

退休劳动合同怎么写？

2019/10/25 职场文书

为什么不建议在go项目中使用init()

2021/04/12 Golang

Pytest实现setup和teardown的详细使用详解

2021/04/17 Python