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 相关文章推荐
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
vue实现分页的三种效果
Jun 23 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
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新手上路(九)
2006/10/09 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP可变函数的使用详解
2013/06/14 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
django query模块
2019/04/20 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
办公室副主任岗位职责
2013/11/25 职场文书
优秀小学生家长评语
2014/01/30 职场文书
工作违纪检讨书
2014/02/17 职场文书
教师求职简历自我评价
2015/03/10 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android