js判断鼠标移入移除方向

最新推荐文章于 2022-04-22 20:21:14 发布
最新推荐文章于 2022-04-22 20:21:14 发布
阅读量192 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44324124/article/details/107048147
版权 
<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
             
            html,
            body {
                width: 100%;
                height: 100%;
            }
             
            ul {
                list-style: none;
                position: relative;
                width: 600px;
                width: 100%;
            }
             
            ul> li {
                margin: 50px auto;
                position: relative;
                width: 300px;
                height: 300px;
                background-color: black;
                overflow: hidden;
            }
             
            ul> li .bg {
                position: absolute;
                width: 300px;
                height: 300px;
                left: -100%;
                top: 0;
                background-color: red;
                text-align: center;
                line-height: 300px;
                color: blue;
                font-size: 150px;
            }
             
            .line {
                position: absolute;
                width: 50%;
                height: 1px;
                background: red;
                right: 0;
                top: 50%;
                transition: all .3s;
                transform-origin: left;
            }
             
            .res {
                text-align: center;
            }
        </style>
    </head>
 
    <body>
        <ul>
            <li>
                <div class="bg">
                    SB
                </div>
            </li>
        </ul>
        <div class="res"></div>
        <script src="./jquery-3.4.1.min.js"></script>
        <script>
            $("li").on("mouseenter mouseleave", function(e) {
                var $bg = $(this).find('.bg');
                var w = this.offsetWidth; //获取元素宽度
                var h = this.offsetHeight; //获取元素高度
                var toTop = this.getBoundingClientRect().top + document.body.scrollTop; //兼容滚动条
                var x = e.pageX - this.getBoundingClientRect().left - w / 2; //获取当前鼠标的x轴位置（相对于这个li的中心点）
                var y = e.pageY - toTop - h / 2; 获取当前鼠标的y轴位置（相对于这个li的中心点）
 
                var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
                var eventType = e.type;
                var res = Math.atan2(y, x) / (Math.PI / 180) + 180;
                $('.line').css('transform', 'rotate(' + res + 'deg)');
 
                var dirName = new Array('上方', '右侧', '下方', '左侧');
 
                if(eventType == 'mouseenter') {
                    $('.res').text(dirName[direction] + '进入');
                    animationIn(direction, $bg);
                } else {
                    $('.res').text(dirName[direction] + '离开');
                    animationOut(direction, $bg);
                }
            });
 
            function animationIn(direction, ele) {
 
                switch(direction) {
                    case 0:
                        ele.css({
                            left: 0,
                            top: '-100%'
                        }).animate({
                            top: 0
                        }, 300);
                        break;
                    case 1:
                        ele.css({
                            left: '100%',
                            top: 0
                        }).animate({
                            left: 0
                        }, 300);
                        break;
                    case 2:
                        ele.css({
                            left: 0,
                            top: '100%'
                        }).animate({
                            top: 0
                        }, 300);
                        break;
                    case 3:
                        ele.css({
                            left: '-100%',
                            top: 0
                        }).animate({
                            left: 0
                        }, 300);
                        break;
                }
            }
 
            function animationOut(direction, ele) {
                switch(direction) {
                    case 0:
                        ele.animate({
                            top: '-100%'
                        }, 300);
                        break;
                    case 1:
                        ele.animate({
                            left: '100%'
                        }, 300);
                        break;
                    case 2:
                        ele.animate({
                            top: '100%'
                        }, 300);
                        break;
                    case 3:
                        ele.animate({
                            left: '-100%'
                        }, 300);
                        break;
                }
 
            }
        </script>
 
    </body>
 
</html>

 

wgod
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript
m0_59359854的博客
07-04 2079
拖拽原理1：mousedown 鼠标按压获取鼠标在登录框的宽度。2：mousemove 鼠标移动的时获取最新的pageX减去鼠标在登录框的X距离，就是模态框的left与top值。3：mouseup 鼠标松开时，移除mousemove 事件 client概述通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。clientTop ：元素上边框大小clientLeft ：元素左边框大小clientWidth：包括padding，不包括边框。clientHeight：包括paddin
js确定鼠标移入移出方向demo
蓝色之恋love的博客
11-29 538
效果图： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>鼠标的移入和移出事件</title> <style> .box{ width: 200px; heig
js中鼠标事件mouseover、mouseenter和mouseleave、mouseout的区别
JackieDYH的博客
05-25 1万+
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave 异同体现在两个方面： 1. 是否支持冒泡 2.事件的触发时机 mouseenter事件的情况 当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触...
用jQuery和js判断鼠标的滑动方向
m0_62956518的博客
04-22 3348
判断鼠标的滑动方向需要用到鼠标的两个事件 一个是鼠标的按下事件：mousedown 一个是鼠标的松开事件：mouseup 本文使用了jquery，不使用jquery可以使用原生js获取html的元素 1.设置一个div 2.获取鼠标按下位置的X轴 $(document).ready(function() { $("#demo").mousedown(function(e) { var a1 = e.screenX; ...
js-判断鼠标移入移出的方向
李dayday
09-28 444
写好的函数,判断移入移出时鼠标从哪个方向进去出来的 // 返回值 // top 0 right 1 bottom 2 left 3 // event 鼠标对象 ele 元素 function getDer(wrap, event) { var d; var w = ele.offsetWidth, h = ele....
js判断鼠标键入的方向
weixin_45681557的博客
10-06 112
由于对一些方法不是很熟悉，都在下面记录： 网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight 网页被卷去的高：document.body.scrollTop 屏幕分辨率高：window.screen.height addEve...
js判断鼠标移入移出方向的方法
10-15
在JavaScript中，有时候我们需要在元素上添加交互效果，比如判断用户鼠标移入或移出时的方向，这在一些动态布局或者交互设计中很有用。本文将详细介绍如何使用JS实现这一功能。 首先，我们要理解基本原理。当鼠标...
jQuery鼠标移入抖动变形特效
06-24
在本文中，我们将深入探讨如何使用jQuery和HTML5 Canvas实现一款独特的鼠标移入抖动变形特效。这个特效在用户将鼠标悬停在HTML元素上时，可以为元素的边框创造出波浪般的抖动视觉效果，增加了交互性与趣味性。 首先...
鼠标移入移出事件模块
08-21
2. 删除所有鼠标移入移出事件：这个功能用于一次性移除所有关联的鼠标移入和移出事件，确保程序在某些情况下可以彻底清空事件队列。 3. 添加鼠标移入移出事件：这是将事件监听器绑定到指定元素上的过程，当鼠标进入...
jquery 鼠标移入显示悬浮框
09-10
本主题聚焦于"jQuery 鼠标移入显示悬浮框"，这是一个常见的交互设计元素，用于提供额外的信息或者功能，提升用户体验。以下将详细解释这个知识点。 首先，我们要理解悬浮框（通常称为 tooltip）的基本概念。Tooltip...
video.js实现鼠标移入播放鼠标移出暂停
12-31
在本文中，我们将深入探讨如何使用video.js库来实现一个功能，即当鼠标移入视频时自动播放，而当鼠标移出视频时则暂停播放。video.js是一个强大的HTML5视频播放器，它提供了丰富的自定义选项和良好的浏览器兼容性，...
js判断鼠标移入移出方向
jason_renyu的博客
11-12 622
PC端鼠标移入移出的效果很好，这里就给出判断鼠标移入移出的方法，有空再发出带效果的文章，不过授之以鱼不如受之以渔，有了个这个方法，效果不还是so easy吗？ 代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewpo...
判断鼠标移入移出方向（二）-----获取鼠标移入方向
Y.Cheng的博客
05-22 1736
第二部分内容，这里也列出思路，方便承接第一部分。 思路 1：给li绑定鼠标移入移出事件 2：获取鼠标移入的位置（有用）,例:(x,y) 3：获取图片距离浏览器的位置（有用），top，left，height+top,left+width看到这个你们应该就理解了 4：将鼠标坐标与图片距离浏览器的位置相减，例如 x-top,x-(height+top)…等等后面详细讲 5：通过差值获...
JS判断鼠标移入移出元素时的方向
weixin_34341229的博客
03-31 408
效果演示： 思路详解 把元素框分成如下四部分： 只要能判断出鼠标移入移出时属于哪个部分的范围内，问题即可解决。而这个判断可通过斜率，结合鼠标的位置与元素框中心点的位置比较得出。这个判断原理，采用下面的坐标系图解来说明。 解决这个问题，建立如下图坐标系： 1）上图以浏览器可视区域左上角为原点建立坐标系，坐标系与数学坐标系方向一致，往右表示x轴正方向，往下表示y轴负方向； 2）图中点(x...
js 鼠标事件_移入移出
热门推荐
随风潜入夜，不白头
04-06 1万+
mouseover（移入） mouseout（移出） mouseover 此事件类型冒泡，可能引起很多头痛的问题。例如，当鼠标指针移出Inner元素，事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会触发绑定的mouseover处理函数。mouseout 此事件类型冒泡，可能引起很多头痛的问题。例如，当鼠标指针移出Inner元素，事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会触发绑定的mouseout处理函数。 $(".class").mouseover(funct
html中if判断鼠标,javascript如何判断鼠标是否在div区域内？
weixin_39849548的博客
06-04 2200
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。方法一：通过mouseover、mouseout事件，来判断鼠标是否在div区域。 但是这种方法的局限性就是，必须要触发mous...
jq实现鼠标移入移除透明度改变
最新发布
06-09
<title>jQuery鼠标移入移除透明度改变示例 div { width: 200px; height: 200px; background-color: #f00; opacity: 0.5; /* 初始透明度为 0.5 */ } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值