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 相关文章推荐
jquery.validate使用攻略 第一部
Jul 01 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
react 组件传值的三种方法
Jun 03 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 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防注入漏洞过滤函数代码
2012/04/11 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python调用支付宝支付接口流程
2019/08/15 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
keras 读取多标签图像数据方式
2020/06/12 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
详解Scrapy Redis入门实战
2020/11/18 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
Python如何telnet到网络设备
2021/02/18 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
学习心理学的体会
2014/11/07 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
学校端午节活动总结
2015/02/11 职场文书