元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。
>>>>
实现思路
根据鼠标的位置定位在元素内出现的方向
根据方向动态设置遮罩层样式
设置动画移动遮罩层
>>>>
jQuery版
jQuery插件可以通过$.fn.extend方法进行拓展。
html
css
js
>>>>
Vue版
通用Vue的组件实现判断元素内鼠标的位置,利用插槽的方式显示遮罩层内容。
html
css
js
>>>>
效果
领取专属 10元无门槛券
私享最新 技术干货