JS实现穿墙效果(判断鼠标划入划出的方向)
<!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>
JS实现穿墙效果(判断鼠标划入划出的方向)的更多相关文章
- jQuery鼠标划入划出
今天来简单的谈谈jQuery的一个划入划出的方法,.首先划入划出能想到的东西有哪些呢,. 1:hover 2:mouseenter/mouseleave 3:mouseover/mouseout. 一 ...
- JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向
本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...
- CSS动画划入划出酷炫
HTML插入 <!DOCTYPE html> <html class="no-js iarouse"> <head> <meta char ...
- 通信录分组并且分组标签悬停划入划出（包含错误信息及修改）--第三方开源--PinnedSectionListView
PinnedSectionListView在github上的链接地址是:https://github.com/beworker/pinned-section-listview . 下载下来后直接将Pi ...
- NGUI中 鼠标划出屏幕后，停止对 UIDragScrollView 的 press
using UnityEngine; /// <summary> /// NGUI中 鼠标划出屏幕后,停止对 UIDragScrollView 的 press /// </summa ...
- JS判断鼠标移入元素的方向
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- js中判断鼠标滚轮方向的方法
前 言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...
随机推荐
- 【Uva 10118】Free Candies
[Link]: [Description] 有4堆书; 每本书编号从1..20 每堆书都是N本; 然后每次只能从任意一堆的堆顶拿一本书装到自己的口袋里; 你的口袋最多容纳5本书; 当你的口袋里有两本一 ...
- Annotation中Result的params属性
这个属性只有在重定向时有用,而转发时不会设置参数. 如: @Results({ @Result(name="success", location="page", ...
- SPSS提示“列表中不同意存在字符串变量”的解决方法
今天用SPSS对一些数据进行主成分分析,SPSS 19.0进行主成分分析的方法是:分析--降维--因子分析,可是当导入一些变量的时候.就会弹出窗体说"列表中不同意存在字符串变量", ...
- IT痴汉的工作现状41-亲历招投标
2015年9月3日早7点,复兴门外大街已是车水马龙.伟仔早早的从东直门赶到这里.呼吸着首都特有的雾气,回味着昨晚与齐天的那一顿簋街麻小,想象着今天的大场面,心中不免有一丝紧张. 今天是个重要的日子,是 ...
- linux命令行学习-dig(DNS查询器)
在web开发中.总要熟悉的就是http协议.而发起一个http開始前最先要经历的一个过程就是DNS解析.简单说就是域名怎样终于解析到实际serverip的过程. 而在研究DNS解析和排除DNS解析类故 ...
- 【Android实战】Android沉浸式状态栏实现（下）
之前的Android沉浸式状态栏实现并没有考虑软键盘的影响,接下来的内容将会针对这个问题给出解决方式,先看一下效果图 这个是一个留言板的效果图: 即弹出软键盘的时候并不会导致整个布局上移. 详细怎样实 ...
- POJ2823 Sliding Window【双端队列】
求连续的k个中最大最小值,k是滑动的,每次滑动一个 用双端队列维护可能的答案值 假设要求最小值,则维护一个单调递增的序列 对一開始的前k个,新增加的假设比队尾的小.则弹出队尾的,直到新增加的比队尾大. ...
- js02---字符串
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- ElasticSearch 工作原理
ElasticSearch 工作原理图 文字说明,以后更新
- Java_Learn
20180417 集合类 Collection 如果是实现了list接口的集合类,具备的特点是有序,可重复: 如果是实现了set接口的集合类,具备的特点是无序,不可重复: Collection中的方法 ...