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

Prototype Hash对象学习

Jul 19 Javascript

fmt:formatDate的输出格式详解

Jan 09 Javascript

jQuery.holdReady()使用方法

May 20 Javascript

原生Js实现简易烟花爆炸效果的方法

Mar 20 Javascript

JavaScript实现表格点击排序的方法

May 11 Javascript

JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

May 25 Javascript

JS中处理时间之setUTCMinutes()方法的使用

Jun 12 Javascript

javascript日期计算实例分析

Jun 29 Javascript

javascript中offset、client、scroll的属性总结

Aug 13 Javascript

基于JavaScript实现右键菜单和拖拽功能

Nov 28 Javascript

Nuxt.js实战详解

Jan 18 Javascript

jQuery插件实现弹性运动完整示例

Jul 07 jQuery

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

介绍几个array库的新函数 php

2006/12/29 PHP

php数组函数序列之array_count_values() 统计数组中所有值出现的次数函数

2011/10/29 PHP

php中opendir函数用法实例

2014/11/15 PHP

PHP字符串比较函数strcmp()和strcasecmp()使用总结

2014/11/19 PHP

PHP实现将科学计数法转换为原始数字字符串的方法

2014/12/16 PHP

jscript之Open an Excel Spreadsheet

2007/06/13 Javascript

从jquery的过滤器.filter()方法想到的

2013/09/29 Javascript

js截取固定长度的中英文字符的简单实例

2013/11/22 Javascript

css3元素简单的闪烁效果实现(html5 jquery)

2013/12/28 Javascript

js通过更改按钮的显示样式实现按钮的滑动效果

2014/04/23 Javascript

微信小程序九宫格实例代码

2017/01/21 Javascript

详解Vue中localstorage和sessionstorage的使用

2017/12/22 Javascript

vue 页面加载进度条组件实例

2018/02/05 Javascript

Vue Element 分组+多选+可搜索Select选择器实现示例

2018/07/23 Javascript

详解小程序设置缓存并且不覆盖原有数据

2019/04/15 Javascript

微信小程序按钮点击跳转页面详解

2019/05/06 Javascript

Javascript和jquery在selenium的使用过程

2019/10/31 jQuery

vue elementUI 表单校验的实现代码（多层嵌套）

2019/11/06 Javascript

Vuex实现数据共享的方法

2019/12/20 Javascript

深入理解python try异常处理机制

2016/06/01 Python

Numpy掩码式数组详解

2018/04/17 Python

Python系统监控模块psutil功能与经典用法分析

2018/05/24 Python

使用python爬取微博数据打造一颗“心”

2019/06/28 Python

python线程里哪种模块比较适合

2020/08/02 Python

澳大利亚第一旅行车和房车配件店：Caravan RV Camping

2020/12/26 全球购物

英国婴儿产品专家：Samuel Johnston

2020/04/20 全球购物

广告学专业推荐信范文

2013/11/23 职场文书

期末考试动员演讲稿

2014/01/10 职场文书

亲子读书活动方案

2014/02/22 职场文书

大学军训感言600字

2014/02/25 职场文书

学校社会实践活动总结

2014/07/03 职场文书

入党积极分子批评与自我批评思想汇报

2014/09/14 职场文书

2015年部门工作总结范文

2015/03/31 职场文书

基督教追悼会答谢词

2015/09/29 职场文书

2016年小学生迎国庆广播稿

2015/12/18 职场文书

JS前端使用Canvas快速实现手势解锁特效

2022/09/23 Javascript