请选择 进入手机版 | 继续访问电脑版

Vue弧形轮播菜单导航栏

[复制链接]
听见深浅 发表于 2021-1-1 17:44:08 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
搞了个弧形轮播导航栏,轮播有动画过渡,可设置自动轮播,以及手动左右切换,只提供我的实现方法,没有集成为组件,各人可做参考根据自己的需求举行修改,优化封装成组件使用。
视频演示,有点暗昧,手机拍的。


有什么问题批评见
  1.                   
  2. [list]        
  3. [*]          [img]https://www.jianchenwangluo.com/v.img[/img]          {{v.title}}
  4.       
  5. [/list]   
  6.   
  7. img {  border: 0;}li {  list-style: none;}.user_callback #user_pic {  position: relative;  overflow: hidden;  background-image: url(../assets/img/router.png);  background-size: 100% 100%;  background-position: center center;  height: 2.3rem;  // height: 5rem;  width: 9rem;  z-index: 2;  // background: pink;  margin: 0 auto;  .info {    color: #ffffff;    font-size: 0.2rem;    margin-top: 0.05rem;    text-align: center;    white-space: nowrap;    background: rgba(13, 38, 141, 0.82);    padding: 0.1rem;  }  .info_y {    color: #ffffff;    font-size: 0.2rem;    margin-top: 0.05rem;    text-align: center;    white-space: nowrap;    background: rgba(244, 197, 72, 0.82);    padding: 0.1rem;  }}.user_callback #user_pic ul {  width: 990px;  height: 285px;  position: relative;  top: 20px;  left: 105px;}.user_callback #user_pic ul li {  position: absolute;}.user_callback #user_pic ul img {  position: relative;  top: 0;  left: 0;}.user_callback #user_pic ul .user_pic1 {  left: -75px;  top: -10px;  z-index: 0;}.user_callback #user_pic ul .user_pic2 {  left: 3px;  top: 16px;  z-index: 2;}.user_callback #user_pic ul .user_pic3 {  left: 85px;  top: 42px;  z-index: 3;}.user_callback #user_pic ul .user_pic4 {  left: 167px;  top: 41px;  z-index: 4;}.user_callback #user_pic ul .user_pic5 {  left: 243px;  top: 17px;  z-index: 3;}.user_callback #user_pic ul .user_pic6 {  left: 316px;  top: -13px;  // top: -21px;  // left: 345px;  z-index: 2;}.user_callback #user_pic ul .user_pic7 {  left: 345px;  top: -50px;  z-index: 1;}.user_callback #user_pic ul .user_pic8 {  left: -99px;  top: -49px;  z-index: 0;}.user_callback #user_pic ul li.user_pic1 {  opacity: 0.6;}.user_callback #user_pic ul li.user_pic2 {  opacity: 0.8;}.user_callback #user_pic ul li.user_pic3 {  opacity: 1;}.user_callback #user_pic ul li.user_pic4 {  opacity: 1;}.user_callback #user_pic ul li.user_pic5 {  opacity: 0.8;}.user_callback #user_pic ul li.user_pic6 {  opacity: 0.6;}.user_callback #user_pic ul li.user_pic7 {  opacity: 0.2;}.user_callback #user_pic ul li.user_pic8 {  opacity: 0.2;}.user_callback #user_pic ul li.user_pic1 img {  width: 1rem;  height: 1rem;}.user_callback #user_pic ul li.user_pic2 img {  width: 1rem;  height: 1rem;}.user_callback #user_pic ul li.user_pic3 img {  width: 1rem;  height: 1rem;}.user_callback #user_pic ul li.user_pic4 img {  width: 1rem;  height: 1rem;}.user_callback #user_pic ul li.user_pic5 img {  width: 1rem;  height: 1rem;}.user_callback #user_pic ul li.user_pic6 img {  width: 1rem;  height: 1rem;}.user_callback #user_pic ul li.user_pic7 img {  width: 1rem;  height: 1rem;}.user_callback #user_pic ul li.user_pic8 img {  width: 1rem;  height: 1rem;}.user_callback #user_pic span {  display: inline-block;  *display: inline;  *zoom: 1;  width: 80px;  height: 80px;  position: absolute;  top: 160px;  z-index: 30;  cursor: pointer;  opacity: 0.7;  filter: alpha(opacity=70);}.user_callback #user_pic:hover span {  opacity: 1;  filter: alpha(opacity=100);}.user_callback #user_pic span img {  width: 80px;  height: 80px;  display: block;}.user_callback #user_pic span.prev {  background: url(../assets/img/newIndex/left.png) no-repeat;  position: absolute;  top: 100px;  left: 5px;  display: inline-block;  width: 60px;  height: 60px;}.user_callback #user_pic span.next {  background: url(../assets/img/newIndex/right.png) no-repeat;  position: absolute;  top: 100px;  right: 5px;  display: inline-block;  width: 60px;  height: 60px;}.user_callback #user_pic span.prev:hover {  // background: url(../assets/img/items/icon_business_normal.png) no-repeat;}.user_callback #user_pic span.next:hover {  // background: url(../assets/img/items/icon_business_normal.png) no-repeat;}.user_callback {  overflow: hidden;}
复制代码
来源:https://blog.csdn.net/weixin_44143279/article/details/111941695
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )