首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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程序设计有所帮助。

jQuery控制div实现随滚动条滚动效果

- Author -

smartsmile2012

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
xmlplus组件设计系列之按钮（2）
Apr 26 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
js实现日历
Nov 07 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
相对路径 (1) Mint UI(1) 远程桌面(2) mt-swipe(1) 相对路径(1) exists(2) REST(1) Switch(1) 慢日志(1) cmd(1)
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php二维数组转成字符串示例
2014/02/17 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
微信小程序 数组（增，删，改，查）等操作实例详解
2017/01/05 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python 文件与目录操作
2008/12/24 Python
java直接调用python脚本的例子
2014/02/16 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
详解Python设计模式之策略模式
2020/06/15 Python
Python爬取某平台短视频的方法
2021/02/08 Python
Python页面加载的等待方式总结
2021/02/28 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
经济信息管理专业大学生求职信
2013/09/27 职场文书
经典演讲稿范文
2013/12/30 职场文书