固定区域内鼠标跟随简单例子
主要用js盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>固定区域内鼠标跟随例子</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#parentbox {
position: relative;
margin: auto;
width: 500px;
height: 500px;
background: lavender;
}
#childbox {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background: lightpink;
}
</style>
</head>
<body>
<div id="parentbox">
<div id="childbox"></div>
</div>
</body>
</html>
<script type="text/javascript">
var parentBox = document.getElementById('parentbox');
var childBox = document.getElementById('childbox');
var parentOffsetLeft = parentBox.offsetLeft;
var parentOffseTtop = parentBox.offsetTop;
var childBoxOffsetW = childBox.offsetWidth;
var childBoxOffsetH = childBox.offsetHeight;
parentBox.onmousemove = function(e) {
parentBox.appendChild(childBox)
var e = e || window.event
var tar = e.target || e.srcElement
var X = e.clientX,
Y = e.clientY
childBox.style.left = X - parentOffsetLeft + 'px'
childBox.style.top = Y - parentOffseTtop + 'px'
maxFn(parentBox.offsetWidth - childBoxOffsetW, parentBox.offsetHeight - childBoxOffsetH)
}
function maxFn(Right, Bottom) {
if(parseFloat(childBox.style.left) <= 0 || parseFloat(childBox.style.left) >= Right || parseFloat(childBox.style.top) <= 0 || parseFloat(childBox.style.top) >= Bottom) {
childBox.remove()
}
}
//要是想鼠标离开小球不消失老实呆在框里,就让他left值或者top值等于最大值,写的比较乱,也不够全面,以后要用到的时候再一起完善
</script>