js判断鼠标移入移出方向的方法


Posted in Javascript onJune 24, 2020

PC端鼠标移入移出的效果很好,这里就给出判断鼠标移入移出的方法,有空再发出带效果的文章,不过授之以鱼不如受之以渔,有了个这个方法,效果不还是so easy吗?

代码:

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title></title>
 <style type="text/css">
 * {
 padding: 0;
 margin: 0;
 }
 
 .ul-box {
 width: 345px;
 margin: 20px auto;
 background-color: #f5f5f5;
 overflow: auto;
 }
 
 .li-item {
 width: 100%;
 height: 134px;
 margin-bottom: 10px;
 border-radius: 4px;
 }
 
 .li-item1 {
 background: linear-gradient(90deg, #7f90e3 0%, #8b9bff 100%);
 }
 </style>
 </head>
 <body>
 <ul id="ulBox" class="ul-box">
 <li class="li-item li-item1" onmouseleave="derEvent(event, 'leave')" onmouseenter="derEvent(event, 'enter')"></li>
 </ul>
 </body>
 <script type="text/javascript">
 /**
 * @param {Object} event 当前事件源信息
 * @return {Number} d 方向 top 0 right 1 bottom 2 left 3
 */
 function getDer(event) {
 let ele = event.target
 var d;
 var w = ele.offsetWidth,
 h = ele.offsetHeight,
 l = ele.offsetLeft,
 t = ele.offsetTop,
 x = (event.clientX - l - w / 2) * (w > h ? (h / w) : 1),
 y = (event.clientY - t - h / 2) * (h > w ? (w / h) : 1);
 d = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4;
 return d;
 // top 0 right 1 bottom 2 left 3
 }
 /**
 * @param {Object} event 事件源信息
 * @param {Object} type 类型 leave 离开 色 enter 进入
 */
 function derEvent(event, type) {
 let d = getDer(event)
 let txt = ''
 switch (d) {
 case 0:
  txt = '上'
  break;
 case 1:
  txt = '右'
  break;
 case 2:
  txt = '下'
  break;
 case 3:
  txt = '左'
  break;
 default:
  break;
 }
 if (type === 'leave') {
 console.log(txt, '离开')
 } else {
 console.log(txt, '进入')
 }
 }
 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
js实现上传图片预览方法
Oct 25 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
a标签调用js的方法总结
Sep 05 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 #Javascript
JS script脚本中async和defer区别详解
Jun 24 #Javascript
javascript实现前端分页效果
Jun 24 #Javascript
JS实现多选框的操作
Jun 24 #Javascript
微信小程序实现发微博功能的示例代码
Jun 24 #Javascript
JavaScript实现答题评分功能页面
Jun 24 #Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 #Javascript
You might like
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
angular 服务随记小结
2019/05/06 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
小学生考试获奖感言
2014/01/30 职场文书
个人自我剖析材料
2014/02/07 职场文书
志愿者宣传口号
2014/06/17 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
react 项目中引入图片的几种方式
2021/06/02 Javascript
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python