Vue实现类似Spring官网图片滑动效果方法
作者:Ping 时间:2024-04-30 10:29:04
先来看一下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>
来源:https://segmentfault.com/a/1190000018346085
标签:Vue,图片,滑动
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
五个方便好用的Python自动化办公脚本的实现
2022-04-13 10:10:59
![](https://img.aspxhome.com/file/2023/3/113043_0s.jpg)
JavaScript中的this指针用法
2007-08-26 17:29:00
python数字图像处理实现直方图与均衡化
2021-04-01 14:44:59
![](https://img.aspxhome.com/file/2023/7/120937_0s.png)
python中的代码编码格式转换问题
2022-02-26 02:05:02
Mysql的Binlog数据恢复:不小心删除数据库详解
2024-01-18 21:23:29
![](https://img.aspxhome.com/file/2023/2/79022_0s.png)
javascript实现编写网页版计算器
2024-04-23 09:26:25
python通过安装itchat包实现微信自动回复收到的春节祝福
2022-07-09 20:36:26
![](https://img.aspxhome.com/file/2023/4/94694_0s.png)
Python简单I/O操作示例
2021-11-06 04:42:24
python中leastsq函数的使用方法
2023-11-11 06:03:28
![](https://img.aspxhome.com/file/2023/3/108153_0s.png)
.NET5控制台程序使用EF连接MYSQL数据库的方法
2024-01-25 08:07:43
Python HTMLParser模块解析html获取url实例
2023-08-18 01:09:47
Python实现在Excel文件中写入图表
2023-11-20 17:13:03
![](https://img.aspxhome.com/file/2023/7/133907_0s.jpg)
解决python 读取npy文件太大不能完全显示的问题
2021-08-20 12:07:19
![](https://img.aspxhome.com/file/2023/4/82974_0s.jpg)
原生JS实现匀速图片轮播动画
2024-06-07 15:28:15
![](https://img.aspxhome.com/file/2023/9/122589_0s.jpg)
实现用python算法计算圆周率的小诀窍
2023-10-16 15:16:27
![](https://img.aspxhome.com/file/2023/0/124740_0s.png)
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2021-04-12 15:06:27
微软工程师讲解SQL server阻塞
2008-01-05 14:02:00
Python Django中的STATIC_URL 设置和使用方式
2021-08-07 13:39:06
Frontpage2003的怪bug,自动添加“../”的父级目录
2007-09-30 13:30:00
![](https://img.aspxhome.com/file/UploadPic/20079/30/2007930133147256s.jpg)
浅谈python 中的 type(), dtype(), astype()的区别
2022-09-13 22:40:39