JS穿墙效果(根据弧度,判断方向)

最新推荐文章于 2023-02-23 11:28:44 发布
最新推荐文章于 2023-02-23 11:28:44 发布
阅读量161 收藏 1
点赞数 1
文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JAMBO808/article/details/123083844
版权

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 200px;

            height: 200px;

            margin: 250px auto;

            border: 1px solid #333;

            position: relative;

            overflow: hidden;

        }

        span {

            width: 100%;

            height: 100%;

            background-color: yellow;

            opacity: 0.5;

            position: absolute;

            left: 0;

            top: 100%;

            pointer-events: none;

        }

    </style>

</head>

<body>

    <div>

        <span></span>

    </div>

    <script>

        let oDiv = document.querySelector('div');

        let oMask = document.querySelector('span');

        oDiv.οnmοuseοver=handler;

        oDiv.οnmοuseοut=handler;

        function handler (e) {

            //写出相对于css原点坐标

            let mouseX = e.offsetX;

            let mouseY = e.offsetY;

            // console.log('相对于css原点:', mouseX, mouseY);

            //写出虚拟的原点左边(在正方形的中心)

            let originX = Math.round(oDiv.offsetWidth / 2);

            let originY = Math.round(oDiv.offsetHeight / 2);

            // console.log('伪原点坐标为', originY, originX);

            //写出真实的坐标点,也就是真坐标-伪坐标

            let x = mouseX - originX;

            let y = mouseY - originY;

            // console.log('真实的坐标为',x,y);

            //接下来求弧度,弧度就是当一个点在圆周长上走一个半径的距离时,其夹角叫1弧度

            let h = Math.atan2(y, x);

            //该公式为求弧度公式,第一个参数是y,第二个参数是x

            // console.log(h)


 

            //利用拿到的弧度,转换成相对应的角度

            let de = Math.round(h * 180 / Math.PI);

            // console.log(de);

            //为了方便计算角度,讲旋转的坐标转,再旋转回来

            let deg = de + 180

            // console.log(deg)

            //再次简化讲四个方向转化为四个数值

            let dir = Math.round(deg / 90) % 4;

            // console.log(dir);



 

            if (e.type === 'mouseover')oMask.style.transition = 'none';

           

            switch (dir) {

                case 0:

                    oMask.style.left = '-100%';

                    oMask.style.top = 0;

                    break

                case 1:

                    oMask.style.left = 0;

                    oMask.style.top = '-100%';

                    break

                case 2:

                    oMask.style.left = '100%';

                    oMask.style.top = 0;

                    break

                case 3:

                    oMask.style.left = 0;

                    oMask.style.top = '100%';

                    break;

            }

            //制作四个case,判断那个方向进入,就实施哪个范围的定位,记得写break打断,不然会直接穿透到最后一个方向(case3);

            if (e.type === 'mouseover') {

                setTimeout(function () {

                    oMask.style.transition = 'all .3s';

                    oMask.style.left = 0;

                    oMask.style.top = 0;

                }, 30)

            }

            //给鼠标进入设置延迟

        }
 

    </script>


 

</body>

</html>

JAMBO808
关注
调整窗口大小事件 2020/11/24
weixin_50286102的博客
11-24 251
调整窗口大小事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti
移动端触摸事件
weixin_44387746的博客
03-12 175
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信...
移动端的触摸事件
2197
07-19 219
1)click事件 有300ms的延迟问题，感觉到卡顿 双击缩放就是在你第一次点击click的时候会经过300ms之后检测是否再有一次click有的话就是缩放页面，没有就是一个click事件 dblcilck事件失效 2)touch类事件 触摸事件，有touchstart  touchmove   touchend   touchcancel 四种 touchstart：手指触摸到屏幕...
JS穿墙效果案例
weixin_44144755的博客
03-04 82
穿墙效果案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
js判断鼠标移入移出方向的方法
10-15
在JavaScript中，有时候我们需要在元素上添加交互效果，比如判断用户鼠标移入或移出时的方向，这在一些动态布局或者交互设计中很有用。本文将详细介绍如何使用JS实现这一功能。 首先，我们要理解基本原理。当鼠标...
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
10-20
首先，我们来看如何用JavaScript判断鼠标进入容器的方向。通常，开发者可能会采用简单的if...else语句来比较鼠标位置和容器边界的相对位置。然而，这里介绍的两种方法更加优雅和高效： 1. 利用圆和反正切三角函数：...
ACE08:圆角布局，可变相实现圆角图片等效果，可动态设置各个方向圆角弧度效果
05-15
ACE08项目提供了一种解决方案，它允许开发者动态地为各个方向设置不同的圆角弧度，从而增加了设计的灵活性。以下是对这个项目的详细解析。 首先，我们讨论圆角布局。在Android中，通常我们使用XML布局文件中的`...
利用JS判断鼠标移入元素的方向
11-26
在JavaScript中，判断鼠标移入元素的方向是一项实用的技术，它能帮助开发者实现更丰富的交互效果。这个技术的核心在于计算鼠标相对于元素的坐标，并通过数学运算判断出鼠标的移动方向。以下是一个详细的步骤来解释...
移动端 触摸事件
u013400314的博客
07-02 176
触摸事件 touchstart、touchmove、touchend、touchcanceltouchstart：手指触摸到屏幕会触发touchmove：当手指在屏幕上移动时，会触发touchend：当手指离开屏幕时，会触发touchcancel：可由系统进行的触发，比如手指触摸屏幕时候，突然alert了或者 系统中其他打断了touch的行为，则可以触发该事件...
移动端Touch （触摸）事件
qq_51379218的博客
11-06 7370
一：常见的触摸事件：touchstart、touchmove和touchend。 touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 二：触摸事件...
移动端的touch事件
最新发布
m0_67301837的博客
02-23 425
每个触摸事件的event对象都提供了在鼠标事件中常见的属性bubbles、cancleable、view、clientX、clientY、screenX、screenY等。changeTouches：自上次触摸以来发生哪些改变的Touch对象的数组（即当前事件的手指动作的列表）。targetTouches：特定于事件目标的Touch对象的数组（即当前DOM元素上的手指动作的列表）。touches：当前跟踪的触摸操作的touch对象的数组（即当前屏幕上的所有手指动作的列表）。上述事件都会冒泡，也都可以取消。
touchSwipe移动端触摸事件
weixin_34050519的博客
07-21 104
今天分享一款很棒的插件touchSwipe，估计很多朋友都在找手机全屏滚动的效果，因为好多企业的微官网是或是专题都在用这样的效果，那么今天touchSwipe 1.6是最新的专门为移动设备设计的jquery插件，如：Ipad，苹果、安卓，当然PC上也是可以用的，嘻嘻。插件touchSwipe可监听单个和多个手指触摸,鼠标按着左键拖动等事件，因此插件可以实现滑动滚屏、缩放等效果...
移动端-触屏事件
weixin_43622452的博客
02-08 304
事件类型 移动设备上无法使用鼠标，当手指触碰屏幕时会触发 click、mousedown、mouseup 事件，同时还有一些新的事件： touchstart 手指触摸屏幕时触发 touchmove 手指在屏幕上移动时触发 touchend 手指离开屏幕时触发 TouchEvent touches 位于屏幕上的所有手指的列表 targetTouches 位于该元素上的所有手指的列表 chang...
removeEventListener 无法清除
蚁族的奋斗的博客
11-09 1007
https://www.jianshu.com/p/0fe0b8bc186d 1.removeEventListener 和addEventListener 的参数是必须致得，funciton 公用，可以提取出来 2. 至少是2个参数，前面2个参数都是必填的 ...
移动端的常用触摸事件
weixin_43956521的博客
01-30 312
touchstart：当手指触碰到屏幕的时候触发 touchmove：当手指在屏幕上滑动的时候触发 touchend：当手指离开屏幕的时候时候触发 touchcancel 事件：当系统停止跟踪触摸的时候触发(这个事件很少会用，一般不做深入研究)。电话接入或者弹出信息等其他事件切入 event： 1、touches：表示当前跟踪的触摸操作的 touch 对象的数组。 2、 targetTouches：特定于事件目标的 Touch 对象的数组。 3、changeTouches：表示自上次触摸以来发生了什么改.
移动端网页特效入门
qq_49900295的博客
03-25 2660
文章目录1.触屏事件2.触摸事件对象（TouchEvent）3.移动端拖动元素4.移动盒子小案例 1.触屏事件 移动端浏览器兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用原生S书写效果，但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件），Android和IOS都有。 常见的触屏事件如下： 触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指在一个D
使用arctext.js创建平滑弯曲弧形文字效果
"arctext.js 是一个用于实现文字平滑弯曲弧形效果的JavaScript插件，适合在网页设计中创建动态的、视觉吸引人的标题或标语。它可以帮助开发者轻松地将文字排列成扇形或拱形，无需复杂的数学计算和手动调整每个文字的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值