基于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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
requireJS使用指南
Apr 27 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
Vue.extend实现挂载到实例上的方法
May 01 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代码给图片加水印
2015/07/01 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
PHP7常量数组用法分析
2016/09/26 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
js 数组操作代码集锦
2009/04/28 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python print出共轭复数的方法详解
2019/06/25 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Python列表元素常见操作简单示例
2019/10/25 Python
Python bytes string相互转换过程解析
2020/03/05 Python
python如何调用php文件中的函数详解
2020/12/29 Python
explicit和implicit的含义
2012/11/15 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
同学聚会感言一句话
2015/07/30 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
logback如何自定义日志存储
2021/08/30 Java/Android