您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“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切换滚动效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。