您的位置：首页 > Web前端 > JavaScript

JS实现控件跟随鼠标移动

2016-04-28 15:32 796 查看

显示一个div，div内显示当前的时间。

让这个div随着鼠标的移动而移动。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript">

function mobile(){

var x = event.clientX;

var y = event.clientY;

//alert("fujichao");

document.getElementById("topid").style.left = x+"px";

document.getElementById("topid").style.top = y+"px";

}

function showTime(){

var date = new Date();

document.getElementById("topid").innerHTML= date.toLocaleString();

}

setInterval("showTime()",1000);

</script>

</head >

<body onload="showTime()" onmousemove="mobile()" style="height: 800px; width: 1000px; background-color: aquamarine;">

<div id="topid" style="border: 2px red solid;height: 200px; width: 300px;position: absolute;left: 200px; top: 200px;"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航