在div+css中，如何实现图片跟随鼠标任意移动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在div+css中，如何实现图片跟随鼠标任意移动相关的知识，希望对你有一定的参考价值。
类似于坐标，鼠标放在哪就显示哪里的坐标一个道理的，请教具体步骤。
不管怎么实现，只求具体步骤？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标的距离</title>
<script type="text/javascript">
var mouseX;
var mouseY;
function show(event)
var infoDiv = document.getElementById('infoDiv');
mouseOver(event);
document.getElementById("a").innerHTML = mouseX+" "+mouseY ;
infoDiv.style.display = "block";
infoDiv.innerHTML = mouseX+" "+mouseY;
infoDiv.style.left = mouseX + 10 + "px";
infoDiv.style.top = mouseY + 10 + "px";
function hide()
var infoDiv = document.getElementById('infoDiv').style.display = "none";;
function mouseOver(obj)
e = obj || window.event;
// 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离.
mouseX = e.layerX|| e.offsetX;
mouseY = e.layerY|| e.offsetY;
</script>
</head>
<body>
<div onmousemove="show(event);" onmouseout="hide();" style="margin:150px ; background:#ff0; height:300px; width:300px; position:relative; ">鼠标相对于触发事件元素的位置<strong id="a"></strong>
<div id="infoDiv" style="display: none; position: absolute; width: 100px; height: 100px; background-color: #F1F19B;"></div>
</div>
</body>
</html>
兼容火狐哦本回答被提问者采纳 参考技术B div+css不能实现 要用JS控件
鼠标悬停图片移动的效果
当前很多购物网站，像京东，蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移，下移，左移或者右移效果，
实现代码很简单，就用css3的transform便可实现。
下列代码实现的是鼠标悬停，div向上移动30px，鼠标拿开div恢复原始位置。
css：
<style> div{ margin-top: 100px; width: 100px; height: 100px; background: pink; transition:All 0.4s ease-in-out;//让移动效果变得平滑自然 } div:hover{ transform:translate(0,-30px); } </style>
html:
<div></div>
就是这么简单，哈哈哈、、、、
以上是关于在div+css中，如何实现图片跟随鼠标任意移动的主要内容，如果未能解决你的问题，请参考以下文章