我想实现一个功能,在我的网站中,在每个网页的下面有支笔,
用户访问的时候,可以点击这支笔,然后可以在网页的某个位置写 一句话, 写下来的话都可以保存在数据库中,以后网页显示就都那样了。无论显示还是输入的功能都是通过</body>前的JS实现的。现在的问题是,如何才能定位这个位置,DIV的position:absolute并不能固定一个DIV在文档中的位置,如果是相对定位的话,如果网页的内容发生了变化,那这个定位可能就又不准了。 请问大家有什么好的方法不?
用户访问的时候,可以点击这支笔,然后可以在网页的某个位置写 一句话, 写下来的话都可以保存在数据库中,以后网页显示就都那样了。无论显示还是输入的功能都是通过</body>前的JS实现的。现在的问题是,如何才能定位这个位置,DIV的position:absolute并不能固定一个DIV在文档中的位置,如果是相对定位的话,如果网页的内容发生了变化,那这个定位可能就又不准了。 请问大家有什么好的方法不?
新增纸条时,就动态增加一个DIV,同时把信息通过ajax保存到数据库。页面加载时asp(或其它服务器端语言)读取所有纸条。示例代码如下 body{ position:relative;}
div{ position:absolute; background-color:#ddd;border:2px blue solid; }
$(document).ready(function() {
$(this).click(function(e) {
if (e.target.tagName == "HTML") {
var x = e.pageX;
var y = e.pageY;
if (confirm("你想要留言吗")) {
var msg = window.prompt("请输入你的话");
if (msg) {
$("body").append("<div style='left:" + x + "px;top:" + y + "px' >" + msg + "</div>");
// 以下是ajax保存到数据库
// $.post("savemsg.asp", { "msg": msg,"x":x,"y":y }, function() { });
}
} } });
})
<%
'以上省略连接数据库的语名,以下读取所有纸条
set rs=conn.execute("select * from msgs")
while not rs.eof
response.write("<div style='left:" + rs("x") + "px;top:" + rs("y") + "px' >" + rs("msg") + "</div>")
wend
%>
父元素position:relative;
子元素position:absolute;
假定这个DIV原来绝对定位top是700 $(document).ready(function() {
$(window).scroll(function() {
$("#div1").css("top", $(window).scrollTop()+700+"px"); ;
});
});