求一段js代码，div跟随鼠标跑，点击后关闭！
求一段js代码，实现这样的效果：div跟随鼠标跑IE兼容性强的，兼容多种浏览器。如果OK加送200分！可能大家有点误会,其实我想实现的功能很简单.我想要的结果就是一个di...
求一段js代码，实现这样的效果：
div跟随鼠标跑
IE兼容性强的，兼容多种浏览器。如果OK 加送200分！
可能大家有点误会,其实我想实现的功能很简单.我想要的结果就是一个div层跟随鼠标移动,div层上可以放些文字或图片.鼠标移到哪里,div层就跟随到哪里,不用加其它任何功能!再次谢谢!希望高手能帮我再改动一下!如果有精通这方面的高手请和我私聊一下.QQ:635355028 或者HI我! 还有一个稍微复杂点的功能希望高手帮助.我愿意出1000~2000分.非常感谢!! 展开
div跟随鼠标跑
IE兼容性强的，兼容多种浏览器。如果OK 加送200分！
可能大家有点误会,其实我想实现的功能很简单.我想要的结果就是一个div层跟随鼠标移动,div层上可以放些文字或图片.鼠标移到哪里,div层就跟随到哪里,不用加其它任何功能!再次谢谢!希望高手能帮我再改动一下!如果有精通这方面的高手请和我私聊一下.QQ:635355028 或者HI我! 还有一个稍微复杂点的功能希望高手帮助.我愿意出1000~2000分.非常感谢!! 展开
4个回答
展开全部
<!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中显示
<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中显示
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
试试我这个吧，比上面简单些，兼容所有浏览器
<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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给的分是收不回去的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
