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

Jquery iframe内部出滚动条

Feb 11 Javascript

javascript 节点排序 2

Jan 31 Javascript

优化javascript的执行效率一些方法总结

Dec 25 Javascript

Javascript小技巧之生成html元素

May 15 Javascript

js实现简单的购物车有图有代码

May 26 Javascript

仅一个form表单 js实现注册信息依次填写提交功能

Jun 12 Javascript

使用BootStrap实现悬浮窗口的效果

Dec 13 Javascript

微信小程序 Buffer缓冲区的详解

Jul 06 Javascript

使用bootstraptable插件实现表格记录的查询、分页、排序操作

Aug 06 Javascript

一个Js文件函数中调用另一个Js文件函数的方法演示

Aug 14 Javascript

详解无限滚动插件vue-infinite-scroll源码解析

May 12 Javascript

vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法

Nov 05 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 文件上传实例代码

2012/04/19 PHP

介绍一些PHP判断变量的函数

2012/04/24 PHP

几个实用的PHP内置函数使用指南

2014/11/27 PHP

php控制文件下载速度的方法

2015/03/24 PHP

php实现模拟post请求用法实例

2015/07/11 PHP

利用js的Node遍历找到repeater的一个字段实例介绍

2013/04/25 Javascript

兼容ie、firefox的图片自动缩放的css跟js代码分享

2013/08/12 Javascript

JS实用的动画弹出层效果实例

2015/05/05 Javascript

JavaScript中用toString()方法返回时间为字符串

2015/06/12 Javascript

Jquery数字上下滚动动态切换插件

2015/08/08 Javascript

浅谈toLowerCase和toLocaleLowerCase的区别

2016/08/15 Javascript

使用JS编写的随机抽取号码的小程序

2017/08/11 Javascript

JS实现手写parseInt的方法示例

2017/09/24 Javascript

Vuejs中使用markdown服务器端渲染的示例

2017/11/22 Javascript

解决vue 单文件组件中样式加载问题

2019/04/24 Javascript

VUE写一个简单的表格实例

2019/08/06 Javascript

ant design vue中日期选择框混合时间选择器的用法说明

2020/10/27 Javascript

python操作mysql中文显示乱码的解决方法

2014/10/11 Python

python实现下载整个ftp目录的方法

2017/01/17 Python

对Python中数组的几种使用方法总结

2018/06/28 Python

Python函数参数操作详解

2018/08/03 Python

Python3.5文件修改操作实例分析

2019/05/01 Python

python配置文件写入过程详解

2019/10/19 Python

django项目中使用云片网发送短信验证码的实现

2021/01/19 Python

Hotels.com拉丁美洲：从豪华酒店到经济型酒店的预定优惠和折扣

2019/12/09 全球购物

Linux机考试题

2015/10/16 面试题

有个性的自我评价范文

2013/11/15 职场文书

七年级地理教学反思

2014/01/26 职场文书

2014年社区党建工作汇报材料

2014/11/02 职场文书

家长学校教学计划

2015/01/19 职场文书

你会写请假条吗？

2019/06/26 职场文书

golang 生成对应的数据表struct定义操作

2021/04/28 Golang

Vue3如何理解ref toRef和toRefs的区别

2022/02/18 Vue.js

python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)

2022/04/06 Python

MySql按时,天,周,月进行数据统计

2022/08/14 MySQL

MySql统计函数COUNT的具体使用详解

2022/08/14 MySQL