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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 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备份MYSQL数据的多种方法
2014/01/15 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
用jquery来定位
2007/02/20 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
python中嵌套函数的实操步骤
2019/02/27 Python
python实现从wind导入数据
2019/12/03 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
解释一下钝化(Swap out)
2016/12/26 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
学校大课间活动方案
2014/01/30 职场文书
丑小鸭教学反思
2014/02/03 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
酒店员工辞职信范文
2015/02/28 职场文书