小汪通过本文主要向大家介绍了鼠标,布局等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
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>