基于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 相关文章推荐
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
浅谈React Event实现原理
Sep 20 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
JS实现放烟花效果
Mar 10 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
原生js+canvas实现下雪效果
Aug 02 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[00:16]热血竞技场
2019/03/06 DOTA
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
python中使用print输出中文的方法
2018/07/16 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
售后主管岗位职责
2013/12/08 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
武当山导游词
2015/02/03 职场文书
电影红河谷观后感
2015/06/11 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS