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 扩展对input的一些操作方法
Oct 30 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
Vue实现日历小插件
Jun 26 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
Stop SQL Server
2007/06/21 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
RC4文件加密的python实现方法
2015/06/30 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
2014年公司植树节活动方案
2014/03/04 职场文书
学生个人自我鉴定
2014/03/26 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
车间安全生产标语
2014/06/06 职场文书
民事授权委托书范文
2014/08/02 职场文书
公司离职证明标准样本
2014/10/05 职场文书
学历证明样本
2015/06/16 职场文书
python中tkinter复选框使用操作
2021/11/11 Python