Javascript鼠标移入方向感知

这篇文章主要介绍了JavaScript检测鼠标移动方向的方法,涉及javascript鼠标操作的相关技巧,需要的朋友可以参考下。
判断鼠标移入方向的功能函数

function getDir(ev, ele) {var l = ele.getBoundingClientRect().left;var t = ele.getBoundingClientRect().top;var w = ele.getBoundingClientRect().width;var h = ele.getBoundingClientRect().height;var x = (ev.clientX - l - w / 2) * (w > h ? (h / w) : 1);var y = (ev.clientY - t - h / 2) * (h > w ? (w / h) : 1);var deg = Math.atan2(y, x) / (Math.PI / 180);var d = (Math.round((deg + 180) / 90) + 3) % 4;return d;// d的值{上:0,右:1,下:2,左:3}}

整体代码：
html:

  <div id="container"><img src="./bg.jpg" alt=""><p class="ps">故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，描绘成了太阳下最值得骄傲最光明无限的职业。在岸本齐史笔下的忍者世界中，每一位年轻的忍者都在开拓着属于自己的忍道。</p></div>

CSS:

*{margin: 0;padding: 0;
}#container{width: 400px;height: 200px;position: relative;margin-top: 100px;margin-left: 200px;overflow: hidden;}
#container img{width: 100%;height: 100%;transition: 0.5s;
}
#container p{width: 100%;height: 100%;padding: 10px;box-sizing: border-box;position: absolute;left: 0;/* top: 0; */background: rgba(0, 0, 0, .7);color: #ccc;font-size: 14px;line-height: 24px;}
#container:hover img{transform: scale(1.1);
}

JS:

 window.onload = function () {var box = document.getElementById('container');var ps = document.getElementsByClassName('ps');var pos=[{left:0,top:'-100%'},{left:'100%',top:0},{left:0,top:'100%'},{left:'-100%',top:0}]box.onmouseenter = function(ev){var dir = getDir(ev,this);ps[0].style.transition='';ps[0].style.left=pos[dir].left;ps[0].style.top=pos[dir].top;setTimeout(function(){ps[0].style.transition='.3s';ps[0].style.left=0;ps[0].style.top=0;},1000/60)}box.onmouseleave = function(ev){var dir = getDir(ev,this);setTimeout(function(){ps[0].style.transition='';ps[0].style.left=pos[dir].left;ps[0].style.top=pos[dir].top;},100)}}function getDir(ev, ele) {var l = ele.getBoundingClientRect().left;var t = ele.getBoundingClientRect().top;var w = ele.getBoundingClientRect().width;var h = ele.getBoundingClientRect().height;var x = (ev.clientX - l - w / 2) * (w > h ? (h / w) : 1);var y = (ev.clientY - t - h / 2) * (h > w ? (w / h) : 1);var deg = Math.atan2(y, x) / (Math.PI / 180);var d = (Math.round((deg + 180) / 90) + 3) % 4;return d;// d的值{上:0,右:1,下:2,左:3}}

Javascript鼠标移入方向感知相关推荐

判断鼠标移入移出方向（二）-----获取鼠标移入方向
第二部分内容,这里也列出思路,方便承接第一部分. 思路 1:给li绑定鼠标移入移出事件 2:获取鼠标移入的位置(有用),例:(x,y) 3:获取图片距离浏览器的位置(有用),top,left,heig ...
J10:JavaScript鼠标移入移出
1. JavaScript的onmouseover和onmouseout <!doctype html> <html> <head> <meta charse ...
javascript 鼠标移入移出改变图片透明度
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>鼠标移 ...
JavaScript 鼠标移入移出状态（onmouseover、onmouseout）
1.设计一个div 用于演示: <head><meta charset="UTF-8"><title>Title</title>&l ...
JavaScript——鼠标移入移出事件
onmouseenter / onmouseleave 和 onmouseover / onmouseout的关系 onmouseenter 类似 mouseover,它们两者之间的差别是 mouse ...
双显示器扩展显示自定义鼠标移入方向
一.打开显示器设置 win+p键,选择下面的 "更多显示器设置" 二.拖动显示器位置拖成下图这样,点击确认: 三.完毕
Jquery的鼠标移入移出事件
Jquery的鼠标事件下面的是我根据https://www.w3school.com.cn/jquery/event_mouseout.asp,然后自己写的一个小总结的代码. <!DOCTYP ...
python点击弹出悬浮框_“鼠标移入显示悬浮框”特效【转】
1.效果说明在效果当中,当用户将鼠标移入一个块时,会从鼠标的移入方向滑入一个悬浮块,悬浮块会随着鼠标移出当前块,且滑出方向遵循鼠标的移出方向 2.实现原理分析 1.结构分析由于悬浮层有可能从上下左 ...
java图形界面颜色随机变换,JavaScript实现鼠标移入随机变换颜色
大家好! 今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色. /* 这里定义一下div(块元素)已下span 标签的宽.高.边框线以及边框线的颜色*/ span{ displa ...

Javascript鼠标移入方向感知

Javascript鼠标移入方向感知相关推荐

最新文章

热门文章