根据鼠标hover的方向弹出、收回遮罩层,分为jQuery和Vue版

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

>>>>

实现思路

根据鼠标的位置定位在元素内出现的方向

根据方向动态设置遮罩层样式

设置动画移动遮罩层

>>>>

jQuery版

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

html

css

js

>>>>

Vue版

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

html

css

js

>>>>

效果

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180629B19RZF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券