先来看看Spring官网首页一张图片的滑动显示效果

可以看到，随着鼠标滑动，鼠标两侧的绿色画面和灰色画面可以无缝切换。

其实显示这个效果很简单。利用固定定位，保证两张图片处于同一位置，我们可以将灰色图片作为背景图片，然后根据获得的实时X轴坐标动态改变绿色图片的宽度，将超出X轴坐标的部分隐藏起来，就可以达到这种效果。简单来说，这个效果就是动态改变上图的宽度。

达到效果：

我选择了两幅大小相同的KDA卡沙图像，以金色图像为背景图像，以深色图像为左图像，利用Vue的mousemove获取X轴的坐标值，通过监测坐标轴的变化实时改变左图像的宽度。

鼠标部分简化了Spring官网上鼠标位置方位的显示，采用cursor: ew-resize样式，让鼠标可以左右滑动。

代码粘贴

template div class=' roll ' div class=' container ' @ mouse move=' mouse move ' div class=' base '/div div class=' left ' ref=' left ' img src=' http :/./static/image/kda-karsa . jpg ' alt=' '/div/div/templatescript export default { data(){ return { posX : 0 } }，methods : { mouse move(e){//get x coordinate this . posX=e . offsetx } }，watch: { posX(curX) { this。$ refs . left . style . width=` $ { CurX } px `} } }/script style lang=' SCS ' scoped . scroll {。容器{ width: 960px高度： 540 px；背景-color : # cccccc；相对位置：cursor : ew-resize；base{ position:绝对值；宽度： 960 px；高度： 540 px；top : 0；left : 0；背景： url('././static/image/kda-karsa-golden . jpg’)不重复；背景尺寸： 100%；} .左{ position:绝对值；宽度： 480 px；高度： 540 px；飞越：隐藏；top : 0；left : 0；img { width: 960px高度： 540 px；}} }}/style以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。