基于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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
微信小程序实现多选功能
Nov 04 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
微信小程序实现下拉框功能
Jul 16 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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
php扩展ZF――Validate扩展
2008/01/10 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP session 会话处理函数
2016/06/06 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python计算auc的方法
2020/09/09 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
应届护士推荐信
2013/11/16 职场文书
2015元旦感言
2015/12/09 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python