基于jquery的DIV随滚动条滚动而滚动的代码


Posted in Javascript onJuly 20, 2012

核心代码:

<script type="text/javascript" src="http://demo.3water.com/jslib/jquery/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$(window).scroll(function() { 
var top = $(window).scrollTop()+200; 
var left= $(window).scrollLeft()+320; 
$("#editInfo").css({ left:left + "px", top: top + "px" }); 
}); 
}); 
</script> <div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;"> 
<div>用户名:<input type="text" /></div> 
<div>密码:<input type="text" /></div> 
<div>年龄:<input type="text" /></div> 
<div>备注:<input type="text" /></div> 
<div><input type="button" value="保存" /></div> 
</div> 
<div style="height:1500px"></div>

在线演示 http://demo.3water.com/js/2012/jquery_demo/jquery_div.html
记得以前写这样的代码比较麻烦,现在有了JQuery简单多了,就几行代码搞定!
Javascript 相关文章推荐
JavaScript 创建对象
Jul 17 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 #Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 #Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 #Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 #Javascript
基于jQuery的获取标签名的代码
Jul 16 #Javascript
写自已的js类库需要的核心代码
Jul 16 #Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 #Javascript
You might like
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
javascript 必知必会之closure
2009/09/21 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
React快速入门教程
2017/01/17 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python学习 流程控制语句详解
2016/06/01 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Django框架视图函数设计示例
2019/07/29 Python
python模块导入的方法
2019/10/24 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
建筑学推荐信
2013/11/03 职场文书
高校毕业生登记表自我鉴定
2013/11/03 职场文书
环保倡议书300字
2014/05/15 职场文书
药品营销策划方案
2014/06/15 职场文书