鼠标移入移出效果 -- jQuery/Vue版

转载 (原文地址) szp1203 随笔 js 340阅读 2018-06-22 00:18:24 举报

元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。

原文地址

实现思路

1、根据鼠标的位置定位在元素内出现的方向
2、根据方向动态设置遮罩层样式
3、设置动画移动遮罩层

jQuery版

jQuery插件可以通过$.fn.extend方法进行拓展。

html

css

js

Vue版

通用Vue的组件实现判断元素内鼠标的位置,利用插槽的方式显示遮罩层内容。

html

css

js

效果

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复