Vue实现类似Spring官网图片滑动效果

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

可以看到，随着鼠标的滑动，绿色图片和灰色图片可以无缝的在鼠标俩两边切换显示。

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

实现效果：

我这边选择了两张同样大小的KDA卡莎的图片，将金色图作为背景图，暗黑图作为左侧图，用了Vue的mousemove来获取X轴坐标值，并通过监听坐标轴变化来实时改变左侧图片的宽度。

鼠标部分，简化了Spring官网上鼠标位置出轴承的显示，采用了cursor: ew-resize样式，使得鼠标看起来可以左右滑动。

代码粘贴

<template><div class="scroll"><div class="container" @mousemove="mousemove"><div class="base"></div><div class="left" ref="left"><img src="../../static/image/kda-karsa.jpg" alt=""></div></div></div>
</template>
<script>
export default {data() {return {posX: 0}},methods: {mousemove(e) {// 获取x 坐标this.posX = e.offsetX }},watch: {posX(curX) {this.$refs.left.style.width = `${curX}px`}   }
}
</script>
<style lang="scss" scoped>
.scroll{.container{width: 960px;height: 540px;background-color: #cccccc;position: relative;cursor: ew-resize;.base{position: absolute;width: 960px;height: 540px;top: 0;left: 0;background: url('../../static/image/kda-karsa-golden.jpg') no-repeat;background-size: 100%;}.left{position: absolute;width: 480px;height: 540px;overflow: hidden;top: 0;left: 0;img{width: 960px;height: 540px;  }}}
}
</style>

Vue实现类似Spring官网图片滑动效果相关推荐

滴滴官网图片切换效果
演示Demo: https://brights2017.gitee.io/test1/test1-34/ <!DOCTYPE html> <html><head>& ...
Spring官网学习(一)概述
文章目录 1.Spring官网简介 2.Spring总览 2.1.什么是Spring 2.2.Spring的发展历程 3.Spring的设计理念 3.1.Spring的优点 4.IOC和AOP浅析 4 ...
如何在Spring官网下载Spring源码包
在编写代码的过程中,我们常常会有需要观看源代码的需求,但是可能事先并没有需要的源码包,那么该如何重从官网导入需要的源码包呢?下面简述一种导入源码包的方式: 1.点击查看源码时,提示源码不存在,则我们需 ...
Spring官网改版后下载方式
2019独角兽企业重金招聘Python工程师标准>>> Spring官网改版后,很多项目的完整zip包下载链接已经隐掉了,虽然Spring旨在引导大家用更"高大上" ...
教您怎么从spring 官网下载参考文档
假如您使用spring,那么本经验可能帮助到您. 假如您使用spring的过程中,需要查询一些文档,那么本经验可能帮助到您. 假如您对下载spring的文档有疑惑,那么本经验可能帮助到您. 教您怎么从 ...
Spring官网阅读（三）自动注入
上篇文章我们已经学习了1.4小结中关于依赖注入跟方法注入的内容.这篇文章我们继续学习这结中的其他内容,顺便解决下我们上篇文章留下来的一个问题-----注入模型. 前言: 在看下面的内容之前,我们先要对 ...
Spring官网阅读（二）（依赖注入及方法注入）
上篇文章我们学习了官网中的1.2,1.3两小节,主要是涉及了容器,以及Spring实例化对象的一些知识.这篇文章我们继续学习Spring官网,主要是针对1.4小节,主要涉及到Spring的依赖注入.虽 ...
Spring官网阅读（一）容器及实例化
从今天开始,我们一起过一遍Spring的官网,为Spring源码的学习打好基础.在这个过程中,不会涉及过多底层的代码,更多是通过例子证明我们在官网得出的结论,希望自己可以坚持下来,给自己加个油!!! ...
如何从Spring官网中下载完整的jar包（包含5.2.9版本最新版详解，当然所有版本均可下载）
快速找到流程网址: 点击进入Spring官方下载地址点击进入后应该是如下图所示: 然后点击图示中的Spring 点开后就是如下图所示,选择要下载的版本,右键 download. 详解从 ...

Vue实现类似Spring官网图片滑动效果

Vue实现类似Spring官网图片滑动效果相关推荐

最新文章

热门文章