您的位置：首页 > 其它

div 跟着鼠标移动

2017-08-31 10:06 323 查看

DIV跟着鼠标移动

div跟着鼠标移动，主要是更加movemove确定当前鼠标的位置，然后计算当前的div的位置，由于div是绝对布局，不占用文档的空间，只根据父布局来动态的变化，由这个我们就可以处理了。

创建一个跟着动的div，也可以使用动态创建div

<div style="background-color: red;width: 50;height:50px;position:absolute;left:0px;top:0px" id="mouse">
<span>跟着动</span>
</div>

然后就是绑定鼠标移动的事件，这里还要计算一下滚动条的高度，这样就可以计算当前的移动div的left and top的值

<script type="text/javascript">
window.onload = function () {

var div1 = document.getElementById("mouse");
function getXY(eve) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return {x : scrollLeft + eve.clientX,y : scrollTop + eve.clientY };
}
document.onmousemove = function (ev) {
var oEvent = ev || event;
var pos = getXY(oEvent);
div1.style.left = pos.x + "px";;
div1.style.top = pos.y + "px";
};
document.oncontextmenu = function(){return false};     //禁止鼠标右键菜单显示
document.onmouseup = function(e){     //在body里点击触发事件
if(e.button===2){       //如果button=1（鼠标中键），button=2（鼠标右键），button=0（规定鼠标左键）
alert("点击右键")
}else if(e.button === 1){
alert("点击了中键")
}else if(e.button == 0){
alert("点击左键")
}
}
};
</script>

代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>跟着鼠标移动</title>
<style type="text/css">
body {
width:2000px;
height:2000px;
}

</style>
<script type="text/javascript">
window.onload = function () {

var div1 = document.getElementById("mouse");
function getXY(eve) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return {x : scrollLeft + eve.clientX,y : scrollTop + eve.clientY };
}
document.onmousemove = function (ev) {
var oEvent = ev || event;
var pos = getXY(oEvent);
div1.style.left = pos.x + "px";;
div1.style.top = pos.y + "px";
};
document.oncontextmenu = function(){return false};     //禁止鼠标右键菜单显示
document.onmouseup = function(e){     //在body里点击触发事件
if(e.button===2){       //如果button=1（鼠标中键），button=2（鼠标右键），button=0（规定鼠标左键）
alert("点击右键")
}else if(e.button === 1){
alert("点击了中键")
}else if(e.button == 0){
alert("点击左键")
}
}
};
</script>
</head>
<body>
<div style="background-color: red;width: 50;height:50px;position:absolute;left:0px;top:0px" id="mouse">
<span>跟着动</span>
</div>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航