<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px height:100px background:red position:absolute}
</style>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<script>
document.onmousemove=function (ev)
{
var oEvent=ev||event
var oDiv=document.getElementById('div1')
oDiv.style.left=oEvent.clientX+'px'
oDiv.style.top=oEvent.clientY+'px'
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
<!DOCTYPE html><html>
<head>
<style type="text/css">
#ball{
position:absolute
left:250px
top:118px
}
</style>
<script language="JavaScript">
var x,y,o
function canMove(e){
e = e || window.event
x=document.body.scrollLeft+e.clientX
y=document.body.scrollTop+e.clientY
ball.style.left=x+20 + "px"
ball.style.top=y + "px"
clearTimeout(o)
o=setTimeout(function(){
canMove(e)
},100)
}
document.onmousemove=canMove
</script>
</head>
<body>
<center>
<font face="隶书" size="5" color="blur">
鼠标移动图像跟随效果
</font>
</center>
<div id="ball">
<img src="E:/image/1.jpg" width="20" height="20">
</div>
</body>
</html>
判断位置如果只相当body也就是屏幕上下左右而不考虑滚动条的话。使用js的getBoundingClientRect方法吧。自带浏览器兼容效果。返回｛top,lef,right,bottom｝4个值。
你只需要在想出现div时，先使用getBoundingClientRect得到你指定的a的位置，再根据你的DIV大小计算就OK了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）