JS实现穿墙效果(判断鼠标划入划出的方向)
2024-08-24 16:46:09
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>判断鼠标移入移出方向</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .outer {
width: 400px;
height: 400px;
border: 2px solid orange;
margin: 100px auto;
overflow: hidden; } .outer div {
width: 100%;
height: 100%;
background-color: yellow;
opacity: 0.5;
display: none;
}
</style>
</head>
<body>
<div id="box" class="outer">
<div id="mask" style="left: 0;top:0;"></div>
</div> <script type="text/javascript"> var oDiv = document.getElementById('box');
var oMask = document.getElementById('mask'); oDiv.disL = oDiv.offsetLeft;
oDiv.disT = oDiv.offsetTop;
oDiv.disR = oDiv.disL + oDiv.offsetWidth;
oDiv.disB = oDiv.disT + oDiv.offsetHeight; oDiv.addEventListener('mouseenter', moveIn, false);
oDiv.addEventListener('mouseleave', moveOut, false); function moveIn(e) {
var resL = Math.abs(e.clientX - oDiv.disL),//距离左边
resT = Math.abs(e.clientY - oDiv.disT),//距离上边
resR = Math.abs(e.clientX - oDiv.disR),//距离右边
resB = Math.abs(e.clientY - oDiv.disB);//距离下边
var min = Math.min(resL, resB, resR, resT); //console.log(resL, resB, resR, resT, min);
if (min === resL) {
console.log('左边移入');
maskIn('left');
} else if (min === resT) {
console.log('上边移入');
maskIn('top');
} else if (min === resR) {
console.log('右边移入');
maskIn('right');
} else {
console.log('下边移入');
maskIn('bottom');
}
}
function moveOut(e) {
var resL = Math.abs(e.clientX - oDiv.disL),//距离左边
resT = Math.abs(e.clientY - oDiv.disT),//距离上边
resR = Math.abs(e.clientX - oDiv.disR),//距离右边
resB = Math.abs(e.clientY - oDiv.disB);//距离下边
var min = Math.min(resL, resB, resR, resT); //console.log(resL, resB, resR, resT, min);
if (min === resL) {
//console.log('左边移出');
maskOut('left');
} else if (min === resT) {
//console.log('上边移出');
maskOut('top');
} else if (min === resR) {
//console.log('右边移出');
maskOut('right');
} else {
//console.log('下边移出');
maskOut('bottom');
} }
function maskIn(direction) {
var attr = 'marginTop', otherAttr = 'marginLeft', step = -15, maxDis = 'offsetHeight';
if (direction === 'left' || direction === 'top') {
step = 15;
}
if (direction === 'left' || direction === 'right') {
attr = 'marginLeft';
maxDis = 'offsetWidth';
otherAttr = 'marginTop';
}
clearInterval(oMask.timer);
step < 0 ? oMask.style[attr] = oDiv[maxDis] + 'px' : oMask.style[attr] = -oDiv[maxDis] + 'px';
oMask.style[otherAttr] = 0;
oMask.style.display = 'block';
oMask.timer = setInterval(function () {
var disL = parseFloat(oMask.style[attr]) + step;
if (step > 0) {
if (disL >= 0) {
oMask.style.marginLeft = 0;
oMask.style.marginTop = 0;
clearInterval(oMask.timer);
} else {
oMask.style[attr] = disL + 'px';
}
} else {
if (disL <= 0) {
oMask.style.marginLeft = 0;
oMask.style.marginTop = 0;
clearInterval(oMask.timer);
} else {
oMask.style[attr] = disL + 'px';
}
} }, 10);
} function maskOut(direction) {
clearInterval(oMask.timer);
oMask.style.marginLeft = 0;
oMask.style.marginTop = 0;
var attr = 'marginTop', step = 15, maxDis = 'offsetHeight';
if (direction === 'left' || direction === 'top') {
step = -15;
}
if (direction === 'left' || direction === 'right') {
attr = 'marginLeft';
maxDis = 'offsetWidth';
}
oMask.timer = setInterval(function () {
var disL = parseFloat(oMask.style[attr]) + step;
if (step < 0) {
if (disL <= -oDiv[maxDis]) {
oMask.style.display = 'none';
clearInterval(oMask.timer);
} else {
oMask.style[attr] = disL + 'px';
}
} else {
if (disL >= oDiv[maxDis]) {
oMask.style.display = 'none';
clearInterval(oMask.timer);
} else {
oMask.style[attr] = disL + 'px';
}
}
}, 10);
}
</script>
</body>
</html>
最新文章
- 自定义cell侧滑删除
- 嵌入式linux应用程序移植方法总结
- 海量用户-高并发SAAS产品测试上线流程
- [麦先生]TP3.2之微信开发那点事[基础篇]（微信支付完成）
- node.js基础 1之简单的nodejs模块
- 微信公共平台开发2 .net
- 基于python的flask的应用实例注意事项
- Docker学习总结之docker介绍
- Noip模拟考第三题——饥饿游戏
- 最全的ASP.NET开源CMS汇总
- php开发入门教程
- 【巧妙预处理系列+离散化处理】【uva1382】Distant Galaxy
- 基于visual Studio2013解决面试题之0201二叉树转链表
- SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape
- Java中的Future相关
- FPGA基础知识1
- 配置Tomcat apr运行模式
- mysql创建外链失败1005错误解决方法
- apache spark kubernets 部署试用
- [转帖]amzon最新的产品outposts