首页
所有分类
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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
vue.js+element 默认提示中英文操作
Nov 11 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
RustDesk(1) 鸿蒙(2) 鸿蒙3.0(1) 蓝屏(1) win7(2) 蓝牙耳机(1) Debian(1) 声卡驱动(1) 蓝牙(1) 虚拟键盘(1)
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
javascript时区函数介绍
2012/09/14 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python中pickle模块浅析
2020/12/29 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
波兰家居饰品和厨房配件网上商店：Maleomi
2020/12/15 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
社区包粽子活动方案
2014/01/21 职场文书
合同补充协议书
2016/03/24 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis