随鼠标移动的图片或文字特效!
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>跟随鼠标的图片特效</title>
<script language="javascript" type="text/javascript">
document.onmousemove = function () {
var x = window.event.clientX;
var y = window.event.clientY;
var divId = document.getElementById("divId");
if (!divId) {
return;
}
divId.style.left = x;
divId.style.top = y;
}
</script>
</head>
<body>
<div id="divId" style="position: absolute; margin-left:20px;">
这里放的是图片
</div>
</body>
</html>
<html>
<head>
<title>跟随鼠标的图片特效</title>
<script language="javascript" type="text/javascript">
document.onmousemove = function () {
var x = window.event.clientX;
var y = window.event.clientY;
var divId = document.getElementById("divId");
if (!divId) {
return;
}
divId.style.left = x;
divId.style.top = y;
}
</script>
</head>
<body>
<div id="divId" style="position: absolute; margin-left:20px;">
这里放的是图片
</div>
</body>
</html>
其实这段代码很简单,也很好理解,只是获取了当前鼠标在屏幕中的位置; 然后再把坐标值赋给图片,或者文字!当然要用到 position:absoluute; 绝对定位!