本文实例为大家分享了Vue实现3D切换滚动效果的具体代码,供大家参考,具体内容如下 今天写项目,遇到一个点击切换的滚动需求,贴出来,做一个记录 这个是最终的一个效果,点击左右小箭头
本文实例为大家分享了Vue实现3D切换滚动效果的具体代码,供大家参考,具体内容如下
今天写项目,遇到一个点击切换的滚动需求,贴出来,做一个记录
这个是最终的一个效果,点击左右小箭头,实现滚动效果,但是只是简单滚动,没有动画之类的
CSS
中,正常写一个div
用display:flex
来平铺图片js
中,使用v-for
循环列表polyGon
这个css
属性调出一个多边形出来贴一下代码,看看
// html
// <!-- 滚动 -->
<div class="rolling">
<div class="rolling-container">
<div
class="rolling-wraper"
v-for="(v, i) in imgList"
:key="i"
@click="handleImg(v)"
>
<img
:src="require(`@/assets/images/home/company/${v.img}.jpg`)"
class="img"
/>
</div>
<!-- 左侧渐变阴影 -->
<div class="gradient-left"></div>
<div class="rolling-shadow"></div>
<!-- 右侧渐变阴影 -->
<div class="gradient-right"></div>
</div>
<!-- 中间放大层 -->
<div class="photo-bg"></div>
<img
:src="
require(`@/assets/images/home/company/${this.imgList[1].img}.jpg`)
"
class="img-large"
/>
<img
:src="require(`@/assets/images/home/company/photo-bg.png`)"
class="trapezoidal"
/>
<!-- 底部切换 -->
<div class="top-botton">
<div class="btn-left" @click="previous"></div>
<div class="center-text">{{ this.imgList[1].text }}</div>
<div class="btn-right" @click="next"></div>
</div>
</div>
// js
data () {
return {
imgList: [
{
img: 'activity-01',
text: '2020年职称宣传活动',
},
{
img: 'activity-02',
text: '2020年职称宣传活动1',
},
{
img: 'activity-03',
text: '2020年职称宣传活动2',
},
],
}
}
methdos: {
// 点击左侧
previous() {
const direction = 'left';
this.scrollImg(direction);
},
// 点击右侧
next() {
const direction = 'right';
this.scrollImg(direction);
},
// 处理滚动列表图片
scrollImg(direction) {
if (direction === 'left') {
const first = this.imgList.shift();
this.imgList.push(first);
} else {
const last = this.imgList.pop();
this.imgList.unshift(last);
}
console.log();
},
}
// css重点代码
// 绘制多边形
// 这几个属性为逆时针旋转
clip-path: polygon(4% 4%, 1% 90%, 95% 90%, 92% 4%);
具体就根据设计稿慢慢调整
--结束END--
本文标题: vue实现3D切换滚动效果
本文链接: https://www.lsjlt.com/news/145498.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0