preview下面的那个img,因为mask不在img里,无法捕获冒泡,所以当图片上遮罩出现时,就会一直频闪.而加在preview-img上的话就可以冒泡,鼠标放在图片上或者遮罩层上都会有效果....接下来就是比较困难的地方了:
下面得到的是遮罩层距预览图左侧和顶部的距离
maskX就是遮罩层在盒子中的left值,是怎么得来的呢,我来分析一下:
所以说要减去mask本身宽度和高度的一半...:
现在我们的遮罩层实现了移动,但是这样的话当我们鼠标到了边缘的时候,整个遮罩层也会跟着出去怎么办呢?...我们现在给这个盒子加一个滚动条(div {overflow: auto}),看看scrollTop的用法:
我们现在添加一个事件看看scrollTop打印出来的是什么:
可见scrollTop...,但是当我们屏幕滚动到banner以上时,slider侧边栏就开始变成固定定位,当我们再往下滑到main部分时,slider里面的返回顶部会显示出来:
JS部分:
获取元素
看看效果是怎样的吧