现在我想实现这样的功能:加入在页面上有一张图片A,还有一张隐藏的图片B,当我把鼠标移动到A上的时候图片B就能显示,畏怯紧跟在鼠标后(随着鼠标移动),当鼠标移出A时,图片B隐藏。
现在我到时能出现这样的效果,但是当鼠标移动到图片A上的时候B总是一闪一闪的(要求只能用JavaScript实现)
我的思路是当鼠标进入A时,现获取鼠标的坐标,然后再把这个坐标值赋给图片B的左上角坐标谢谢各位了!
现在我到时能出现这样的效果,但是当鼠标移动到图片A上的时候B总是一闪一闪的(要求只能用JavaScript实现)
我的思路是当鼠标进入A时,现获取鼠标的坐标,然后再把这个坐标值赋给图片B的左上角坐标谢谢各位了!
//当前值
newX = window.event.x + document.body.scrollLeft
newY = ((window.event.y)*(-1) + document.body.scrollTop)*(-1)
//B图片
imageB = document.all.imageB
if ( imageB .style.display == ""){
imageB .style.display = "none"
}
else {
imageB .style.display = ""
}
//适当调整
imageB .style.pixelLeft = newX+10
imageB .style.pixelTop = newY-23
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function popUp() {
//当前值
newX = window.event.x + document.body.scrollLeft
newY = ((window.event.y)*(-1) + document.body.scrollTop)*(-1)
//B图片
var imageB = document.getElementById("imageB");
if ( imageB .style.display == ""){
imageB .style.display = "none"
}
else {
imageB .style.display = ""
}
//适当调整
imageB .style.pixelLeft = newX
imageB .style.pixelTop = newY
}
</script>
</head><body>
<img src="main_files/0921_172X140_1.jpg" alt="" onmousemove="popUp()" onmouseout="javascript:document.getElementById('imageB').style.display='none'"/>
<p>
</p>
<img id="imageB" src="main_files/10001260870892181.jpg" alt="" style="display:none; position:absolute"/>
</body>
</html>
加了你的代码后是这个样子的
这句去掉试试