编程 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 Cookie显示用户上次访问的时间和次数

Dec 08 Javascript

一个关于javascript匿名函数的问题分析

Mar 30 Javascript

使用jquery读取html5 localstorage的值的方法

Jan 04 Javascript

解析jQuery与其它js(Prototype)库兼容共存

Jul 04 Javascript

浅谈nodeName,nodeValue,nodeType,typeof 的区别

Jan 13 Javascript

javaScript基础语法介绍

Feb 28 Javascript

AngularJs Using $location详解及示例代码

Sep 02 Javascript

Javascript将字符串日期格式化为yyyy-mm-dd的方法

Oct 27 Javascript

JS 调用微信扫一扫功能

Dec 22 Javascript

node.js利用socket.io实现多人在线匹配联机五子棋

May 31 Javascript

JS复杂判断的更优雅写法代码详解

Nov 07 Javascript

微信小程序实现文字无限轮播效果

Dec 28 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数组

2006/10/09 PHP

ajax+php打造进度条代码[readyState各状态说明]

2010/04/12 PHP

php空间不支持socket但支持curl时recaptcha的用法

2011/11/07 PHP

PHP+JS三级菜单联动菜单实现方法

2016/02/24 PHP

Symfony2之session与cookie用法小结

2016/03/18 PHP

php实现按天数、星期、月份查询的搜索框

2016/05/02 PHP

PHP编程实现csv文件导入mysql数据库的方法

2017/04/29 PHP

动感效果的TAB选项卡jquery 插件

2011/07/09 Javascript

jQuery Trim去除字符串首尾空字符的实现方法说明

2014/02/11 Javascript

使用jquery实现放大镜效果

2014/09/02 Javascript

jQuery插件Tooltipster实现漂亮的工具提示

2015/04/12 Javascript

jQuery插件kinMaxShow扩展效果用法实例

2015/05/04 Javascript

JS实现左右无缝轮播图代码

2016/05/01 Javascript

Vue.js Ajax动态参数与列表显示实现方法

2016/10/20 Javascript

浅谈JavaScript正则表达式-非捕获性分组

2017/03/08 Javascript

一篇看懂vuejs的状态管理神器 vuex状态管理模式

2017/04/20 Javascript

vue获取dom元素注意事项

2017/12/28 Javascript

vue2.0页面前进刷新回退不刷新的实现方法

2018/07/31 Javascript

在JavaScript中如何访问暂未存在的嵌套对象

2019/06/18 Javascript

d3.js实现图形缩放平移

2019/12/19 Javascript

JS数组方法concat()用法实例分析

2020/01/18 Javascript

Python中subprocess模块用法实例详解

2015/05/20 Python

python输入错误密码用户锁定实现方法

2017/11/27 Python

python与caffe改变通道顺序的方法

2018/08/04 Python

纯HTML5+CSS3制作图片旋转

2016/01/12 HTML / CSS

html5的新增的标签和废除的标签简要概述

2013/02/20 HTML / CSS

如果NULL和0作为空指针常数是等价的,那我到底该用哪一个

2014/09/16 面试题

大学毕业生通用求职信

2013/09/28 职场文书

五年级音乐教学反思

2014/02/06 职场文书

2014年教务处工作总结

2014/12/03 职场文书

玄武湖导游词

2015/02/05 职场文书

同学聚会通知书

2015/04/20 职场文书

有关三国演义的读书笔记

2015/06/25 职场文书

同学会感言

2015/07/30 职场文书

sql查询结果列拼接成逗号分隔的字符串方法

2021/05/25 SQL Server

Nginx 路由转发和反向代理location配置实现

2021/11/11 Servers