Javascript实现鼠标移入方向感知


Posted in Javascript onJune 24, 2020

本文介绍了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 相关文章推荐
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
javascript实现前端input密码输入强度验证
Jun 24 #Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 #Javascript
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
JS forEach跳出循环2种实现方法
Jun 24 #Javascript
js判断鼠标移入移出方向的方法
Jun 24 #Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 #Javascript
You might like
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
python操作gmail实例
2015/01/14 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
python中spy++的使用超详细教程
2021/01/29 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
原材料检验岗位职责
2014/03/15 职场文书
房屋租赁协议书
2014/04/10 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技