“鼠标移入显示悬浮框”特效【转】

pepperwang 发布于2019-08-20 14:17 / 574人阅读

摘要：划分方向区域由于需要根据鼠标所处的位置判断鼠标移入方向，因此为四个方向确定临界值。

1、效果说明

在效果当中，当用户将鼠标移入一个块时，会从鼠标的移入方向滑入一个悬浮块，悬浮块会随着鼠标移出当前块，且滑出方向遵循鼠标的移出方向

2、实现原理分析 1、结构分析

由于悬浮层有可能从上下左右四个方向滑入目标块，因此需要先针对结构进行处理。
在此，可以通过两种方法实现“悬浮层”。
一种方法是为每个块定位四个悬浮块（上下左右），当满足鼠标移入的条件时，让相应的悬浮块滑入；
第二种方法是只为每个块定位一个悬浮框，每次鼠标移入时，先“初始化”悬浮块的位置，之后再控制悬浮框滑入。
在本文的案例当中，小编使用的是第二种方法（初始化悬浮块位置）来实现滑动。

2、功能实现逻辑分析

首先通过JS，获取鼠标在块当中的坐标；
此后，根据“鼠标所处的位置”判断鼠标移入方向“；
最后，再根据鼠标移入方向来执行相应的功能。

3、功能实现 1、获取鼠标块内坐标

想要得到鼠标在块内位置，需要使用如下JS中获取位置的方法：
jQuery方法中的“$(元素).offset().top”用于获取元素距页面顶部的距离；“$(元素).offset().left”用于获取元素距页面左边的距离；
原生JS中，通过事件对象（event）的pageX可以获取鼠标相对于页面的X轴位置；通过事件对象（event）的pageY可以获取鼠标相对于页面的Y轴位置。

通过jQuery获取到当前元素与页面顶部、左侧的距离，再获取鼠标处于页面的坐标；之后通过计算获取到下图中的“h”和“w”。
“h”为event.pageY-$(元素).offset().top,是鼠标相对于块元素内的Y轴值；“w”同理。详细可见下图和代码。

2、划分方向区域

由于需要根据“鼠标所处的位置”判断“鼠标移入方向”，因此为四个方向确定“临界值”。为了便于理解，可以使用“对角线”将一个块划分为四个区域（如下A、B、C、D四个区域），与“鼠标移入方向”相对应。

3、获取到鼠标的值，判断所处的区域

如何根据鼠标位置值，计算当前鼠标所在位置呢？根据当前X值，求出四条对角线（即Y的临界值），再根据该值进行判断。
↗（左下角到右上角） Y值临界值求法：
当前X值对应的Y值临界值1 = 当前元素高度 / 当前元素宽度 * 当前鼠标X值；
↘（左上角到右下角） Y值临界值求法：
当前X值对应的Y值临界值2 = 当前元素高度 - （当前元素高度 / 当前元素宽度* 当前鼠标X值）；

A区域条件：y值 > 临界值1; y值 < 临界值2（在↗对角线上方，↘的下方）
B区域条件：y值 > 临界值1; y值 > 临界值2（在↗对角线上方，↘的上方）
C区域条件：y值 < 临界值1; y值 > 临界值2（在↗对角线下方，↘的上方）
D区域条件：y值 < 临界值1; y值 < 临界值2（在↗对角线下方，↘的下方）

感觉很乱？别急，看图！！！

4、成品代码：

本文出自HTML5学堂

云服务器专线服务切换特效特效插件透明特效图片特效

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81520.html

(个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法一

摘要：个人笔记在给在线简历添加特效过程中遇到的问题及解决方法一预览页面滚动元素的事件处理函数。语法参数是一个函数的引用。事件是当窗口发生滚动得时候触发的事件返回文档在垂直方向已滚动的像素值。 (个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法一 github预览页面滚动demo 元素的 scroll 事件处理函数。语法 element.onscroll = functionR...

Yuanf 2019-08-22 17:07 评论0 收藏0
前端特效【第04期】|果汁混合效果-下

摘要：往期回顾在上一期的前端特效里，我们已经把果汁混合的效果里面的圆形菜单做好了，如果你错过了上篇文章今天我们要讨论的是杯子里面的液体生成问题先来回顾下咱们的果汁混合效果吧果汁混合效果，扫描下方二维码就看到啦我们接着上期的内容来继续往下讲吧，本期往期回顾在上一期的【前端特效】☜里，我们已经把果汁混合的效果里面的圆形菜单做好了，如果你错过了上篇文章今天我们要讨论的是杯子里面的液体生成问题 ...

宋华 2019-08-26 12:22 评论0 收藏0
入手万彩录屏大师体验高清录屏视频输出且自带视频编辑特效素材

摘要：老蒋有在之前活动期间入手一个万彩录屏大师企业版的账户，大约花费元左右，当然是终生账户支持升级的。这样，简单的体验入手过的万彩录屏大师软件，优点是支持付费后终生免费升级，而且支持高清输入导出视频，且支持剪辑视频在一个软件中。老蒋有在之前618活动期间入手一个万彩录屏大师企业版的账户，大约花费500元左右，当然是终生账户支持升级的。当初选择这款录屏软件的原因是没有深入寻找是否有其他免费录屏软件，...

dailybird 2021-10-18 13:34 评论0 收藏0
前端每日实战：147# 视频演示如何用纯 CSS 创作透视按钮的悬停特效

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbhDnp?w=400&h=302); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehop...

cppprimer 2019-08-02 11:37 评论0 收藏0