基于jquery的DIV随滚动条滚动而滚动的代码 - Web前端
作者:98wpeu发布时间:2026-05-20分类:网页前端技术浏览:4
导读:核心代码:复制代码代码如下:<scripttype="text/javascript"src="http://demo.jb51.net/JSlib/JQuery/jQu...
核心代码:
复制代码 代码如下:
<scripttype="text/javascript" src="http://demo.jb51.net/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.jb51.net/js/2012/jquery_demo/jquery_div.html
记得以前写这样的代码比较麻烦,现在有了jquery简单多了,就几行代码搞定!
复制代码 代码如下:
<scripttype="text/javascript" src="http://demo.jb51.net/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.jb51.net/js/2012/jquery_demo/jquery_div.html
记得以前写这样的代码比较麻烦,现在有了jquery简单多了,就几行代码搞定!
相关推荐
- 这些年、我收集的JQuery代码小结 - Web前端
- Jquery ajaxStart()与ajaxStop()方法(实例讲解) - Web前端
- jQuery 自定义函数写法分享 - Web前端
- 学习从实践开始之jQuery插件开发 对话框插件开发 - Web前端
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例] - Web前端
- jQuery.getScript加载同域JS的代码 - Web前端
- jQuery 下拉列表 二级联动插件分享 - Web前端
- 一个JQuery操作Table的代码分享 - Web前端
- Jquery命名冲突解决的五种方案分享 - Web前端
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例] - Web前端
- 网页前端技术排行
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


