jQuery炫酷特效之遮罩移动效果

2019独角兽企业重金招聘Python工程师标准>>>

今天带领大家实现一个非常炫酷的遮罩效果。遮罩跟随鼠标的移入点移入区块中（鼠标从区块左侧移入则遮罩也从左侧移入，鼠标从左侧移出遮罩也会左侧移出，其它方向同理），可以将这样一个效果应用到自己到网页中：

炫酷遮罩层

一、准备工作

先想一想这样到一个效果该如何实现呢？HTML结构该怎么搭建？

......

来看看基本到HTML结构是如何到：

HTML结构

CSS：

CSS

我将a中的overflow:hidden注释来，来看看初始到遮罩层中什么位置吧。看完记得将注释去掉哦。

遮罩初始位置

其实结构也是很简单的。这里有个难点就是如何判断鼠标的移入移出方向？

二、获取鼠标移入方向

jQuery并未给出这样的方法，需要自己实现。先放代码，再解释：

Math.atan2(y,x) 返回-PI 到 PI 之间的值(负180°到正180°)，是从 X 轴正向逆时针旋转到点 (x,y) 时经过的角度这里的结果是一个弧度值。那如何把这个值转换为角度呢？我们可以先算出一个角度的弧度值(180 / Math.PI) ，然后用上面计算出来的结果乘以一度的弧度值。（实在不明白自行度娘吧）

三、鼠标移入移出效果

有了上面到基础，那再去实现效果就简单多了。

还有一点需要注意：如果鼠标是从下面移入，先将遮罩放在区块到下面；从右侧移入，先把遮罩放在区块到右侧；从上面移入，先把遮罩放在区块到上面；从左侧移入，先把遮罩放再区块到左侧。然后再运动到left:0;top:0;（css使用到了定位）。移出正好跟移入相反。

鼠标移入

鼠标移出

四、jQuery知识点补充

通过这个例子，引申出一个疑问，鼠标移入移出为什么不使用mouseover和mouseout呢？来看看jQuery中mouseover、mouseout和mouseenter、mouseleave到区别：

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

转载于:https://my.oschina.net/u/2391658/blog/1583340

jQuery炫酷特效之遮罩移动效果相关推荐

JS jquery 炫酷特效
中文版jquery框架在线帮助地址: http://www.okajax.com/book/jquery/ 编辑推荐Jquery文章,希望你喜欢: JS优秀框架:jQuery最新版下载地址及jquer ...
好看的html登录遮罩提示加载中,jQuery炫酷页面预加载Loading特效插件
fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件.它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程. Bower安装 bower ...
可折叠的html元素,jQuery炫酷HTML DOM元素纸张3D折叠特效
oriDomi是一款非常神奇的jQuery炫酷HTML DOM元素纸张折叠特效.oriDomi能够将HTML DOM元素转换为纸张状态,你可以用鼠标来任意折叠它们.oriDomi可以折叠的不仅是静态图 ...
jquery 实现智能炫酷的翻页相册效果
jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离 1. [代码]jquer ...
❤ 十一个拿来就能用的网页炫酷特效
❤ 十个拿来就能用的网页炫酷特效效果如下: (1) 鼠标点击爱心 <!DOCTYPE html> <html lang="en"> <head> ...
html5弹窗全屏,jQuery炫酷全屏模态窗口插件
这是一款jQuery炫酷全屏模态窗口插件.该插件通过和animate.css结合使用,可以制作多种打开全屏模态窗口的炫酷过渡动画效果. 使用方法在页面中引入animate.min.css.jquer ...
的图片怎么循环渲染_十分钟教你做个炫酷的图片切换过度效果
做个炫酷的图片切换过度效果首先,今天是520节日.到了520这类为情侣准备的节日,小编都会感到一万点暴击-- 首先酸一波,搞点事情(蹭波热度). 给大家分享一个520特效页面:看完记得回来为小编点个 ...
38.鼠标移动炫酷特效
效果 (源码网盘地址在最后) 视频演示「前端编程实战 38」HTML+CSS3 实现鼠标移动炫酷特效视频演示地址一:https://www.bilibili.com/video/BV1Xz411v ...
对一些常见的HTML5特效进行整理和运行（有趣特效，烟花特效，爱心特效，炫酷特效）
有趣特效 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en&quo ...
【每日一练】109—一款炫酷按钮的鼠标悬停效果
文 | 杨小爱写在前面按钮,几乎是任何一个项目都会用到的一个组件,因此,今天,我们来练习一个好玩的鼠标效果,具体效果,请看下面的GIF截图: 我们看完了最终效果,现在,我们一起来看一下它的源码. ...

jQuery炫酷特效之遮罩移动效果

jQuery炫酷特效之遮罩移动效果相关推荐

最新文章

热门文章