基于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 相关文章推荐
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
手机号码,密码正则验证
Sep 04 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
js Dom实现换肤效果
Oct 21 Javascript
js实现下拉框二级联动
Dec 04 Javascript
js实现通过开始结束控制的计时器
Feb 25 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 htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
Python表达式的优先级详解
2020/02/18 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
计算机科学与技术应届生求职信
2013/11/07 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
2014年教研工作总结
2014/12/06 职场文书
人事聘任通知
2015/04/21 职场文书
毕业实习证明范本
2015/06/16 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
MySQL 聚合函数排序
2021/07/16 MySQL