本篇内容介绍了“vue怎么实现3D切换滚动效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
这个是最终的一个效果,点击左右小箭头,实现滚动效果,但是只是简单滚动,没有动画之类的
css
中,正常写一个div
用display:flex
来平铺图片
然后中间位置定位一个框,框大小比外面的大,中间图片随意取列表中的一个就行
js
中,使用v-for
循环列表
点击右侧时,将循环列表中的第一个图片删除,然后添加到列表最后一个,点击左侧时同理,这样,就能简单实现一个无缝循环的效果了
最重要的一点,因为中间时梯形,要么就是让UI给一个框,前端设置超出隐藏属性,达到梯形效果,要么就是自己用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%);
“vue怎么实现3D切换滚动效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。