求一段js代码,div跟随鼠标跑,点击后关闭!

求一段js代码,实现这样的效果:div跟随鼠标跑IE兼容性强的,兼容多种浏览器。如果OK加送200分!可能大家有点误会,其实我想实现的功能很简单.我想要的结果就是一个di... 求一段js代码,实现这样的效果:
div跟随鼠标跑
IE兼容性强的,兼容多种浏览器。如果OK 加送200分!
可能大家有点误会,其实我想实现的功能很简单.我想要的结果就是一个div层跟随鼠标移动,div层上可以放些文字或图片.鼠标移到哪里,div层就跟随到哪里,不用加其它任何功能!再次谢谢!希望高手能帮我再改动一下!如果有精通这方面的高手请和我私聊一下.QQ:635355028 或者HI我! 还有一个稍微复杂点的功能希望高手帮助.我愿意出1000~2000分.非常感谢!!
展开
 我来答
百度网友88fd30c7a1
推荐于2016-08-21 · TA获得超过375个赞
知道小有建树答主
回答量:443
采纳率:0%
帮助的人:419万
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.tip{background:#0066FF;width:200px; height:100px; position:absolute}
</style>
<script type="text/javascript">
var flag = true;
function getMouseXY(e){
var posx=0,posy=0;
if(e==null) e=window.event;
if(e.pageX || e.pageY){
posx=e.pageX; posy=e.pageY;
}
else if(e.clientX || e.clientY){
if(document.documentElement.scrollTop){
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else{
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
return {
X : posx,
Y : posy
}
}

function getDiv(){
return document.createElement("div");
}

function g(id){return document.getElementById(id);}

function showTip(){
if(!flag) return;
var domE = g("tip");
if(!domE){
domE = getDiv();
domE.setAttribute("id","tip");
document.body.appendChild(domE);
domE.className = "tip";
}
var m = getMouseXY();
with(domE.style){
top = (m.Y+20)+"px";
left = (m.X)+"px";
}
}

window.onload = function(){
document.documentElement.onmousemove = function(){showTip();}
document.documentElement.onmouseout = function(){
flag = true;
if(g("tip")) document.body.removeChild(g("tip"))
};
document.documentElement.onclick = function(){
flag = false;
if(g("tip")) g("tip").style.display = "none";
}
}
</script>
</head>

<body>

</body>
</html>

===================

除了FF,都行,自己写的。
2010-06-06 8:50am 修改 :
鼠标点击框内不再显示层,移出再移进时再次显示
2010-06-06 10:00am 修改
在body中显示
simlinkwx
2010-06-05 · TA获得超过1331个赞
知道小有建树答主
回答量:308
采纳率:0%
帮助的人:566万
展开全部
试试我这个吧,比上面简单些,兼容所有浏览器
<html>
<head>
<style>
.class1 {
position:absolute;
height:200px;
width:200px;
border:1px solid blue;
}
</style>
</head>
<body onload="init(event)" onmousemove="move(event)" onclick="hide()">
</body>
<script>
var div=null;
function init(event){
event=event||window.event;
div=document.createElement('div');
div.className='class1';
div.style.left=event.clientX+'px';
div.style.top=event.clientY+'px';
document.body.appendChild(div);
}

function move(event){
event=event||window.event;
div.style.left=event.clientX+'px';
div.style.top=event.clientY+'px';
}

function hide(){
div.style.display='none';
}

</script>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
國際漫遊al
2010-06-05 · TA获得超过476个赞
知道答主
回答量:254
采纳率:0%
帮助的人:147万
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.tip{background:#0066FF;width:200px; height:100px; position:absolute}
</style>
<script type="text/javascript">
function getMouseXY(e){
var posx=0,posy=0;
if(e==null) e=window.event;
if(e.pageX || e.pageY){
posx=e.pageX; posy=e.pageY;
}
else if(e.clientX || e.clientY){
if(document.documentElement.scrollTop){
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else{
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
return {
X : posx,
Y : posy
}
}

function getDiv(){
return document.createElement("div");
}

function g(id){return document.getElementById(id);}

function showTip(container){
var domE = g("tip");
if(!domE){
domE = getDiv();
domE.setAttribute("id","tip");
g(container).appendChild(domE);
domE.className = "tip";
}
var m = getMouseXY();
with(domE.style){
top = (m.Y-100+20)+"px";
left = (m.X-100)+"px";
}
}

window.onload = function(){
g("c").onmousemove = function(){showTip("c");}
g("c").onmouseout = function(){if(g("tip")) g("c").removeChild(g("tip"))};
}
</script>
</head>

<body>
<div style="width:200px; height:200px; border:1px #000000 solid; cursor:pointer; position:absolute; background:#FFFFFF;top:100px; left:100px" id="c">sad</div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
鹏翼315
2010-06-05 · TA获得超过928个赞
知道小有建树答主
回答量:411
采纳率:0%
帮助的人:110万
展开全部
给的分是收不回去的
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式