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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 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实现与ASP Banner组件相似的类
2006/10/09 PHP
php+javascript的日历控件
2009/11/19 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
教你安装python Django(图文)
2013/11/04 Python
python Flask实现restful api service
2017/12/04 Python
Python 转换文本编码实现解析
2019/08/27 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
什么是java序列化,如何实现java序列化
2012/11/14 面试题
遥感技术与仪器求职信
2014/02/22 职场文书
法律进机关实施方案
2014/03/12 职场文书
内衣营销方案
2014/03/15 职场文书
战略合作意向书范本
2014/04/01 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
亮剑观后感600字
2015/06/05 职场文书
七一活动主持词
2015/06/29 职场文书
我的中国梦主题班会
2015/08/14 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python