• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue组件实现旋转木马动画

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了Vue组件实现旋转木马动画的具体代码,供大家参考,具体内容如下

源码如下

<template>
  <div id="wrapper">
    <transition-group name="list" tag="ul" mode="out-in">
      <li v-for="(item,index) in piclist" :key="item.url" :style="config[index]">
        <img :src="item.url">
      </li>
    </transition-group>
    <a href="javascript:;" id="arrLeft" class="prev" @click="turnleft"></a>
    <a href="javascript:;" id="arrRight" class="next" @click="turnright"></a>
  </div>
</template>

js:

export default {
  data() {
    return {
      piclist: [
        { url: require("../image/pic1.png") },
        { url: require("../image/pic2.png") },
        { url: require("../image/pic3.png") }
      ],
      //文件图片配置
      config: [
        {
          position: "absolute",
          width: "400px",
          top: "20px",
          left: "50px",
          opacity: 0.2,
          zIndex: 2,
          transition: "1s"
        },
        {
          position: "absolute",
          width: "800px",
          top: "100px",
          left: "200px",
          opacity: 1,
          zIndex: 4,
          transition: "1s"
        },
        {
          position: "absolute",
          width: "400px",
          top: "20px",
          left: "750px",
          opacity: 0.2,
          zIndex: 2,
          transition: "1s"
        }
      ],
      previous: 0,
      now: Date.now()
    };
  },
  methods: {
  //实现点击按钮切换的动画,设置时间参数防止多次点击
    turnleft: function() {
      this.now = Date.now();
      if (this.now - this.previous > 1000) {
        this.config.push(this.config.shift());
        this.previous = this.now;
      }
    },
    turnright: function() {
      this.now = Date.now();
      if (this.now - this.previous > 1000) {
        this.config.unshift(this.config.pop());
        this.previous = this.now;
      }
    }
  }
};

css:

* {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: auto;
  height: 500px;
  width: 79%;
  position: relative;
}
ul {
  list-style: none;
}
li img {
  height: 500px;
  width: 100%;
}
.prev,
.next {
  position: absolute;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  top: 50%;
  margin-top: -56px;
  overflow: hidden;
  text-decoration: none;
  background-color: aqua;
  z-index: 5;
  opacity: 1;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}
.picleft {
  width: 400;
  top: 20;
  left: 50;
  opacity: 0.2;
  z-index: 2;
}
.piccenter {
  width: 800;
  top: 100;
  left: 200;
  opacity: 1;
  z-index: 4;
}
.picright {
  width: 400;
  top: 20;
  left: 750;
  opacity: 0.2;
  z-index: 2;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue实现牌面翻转效果发布时间:2022-02-05
下一篇:
vue实现旋转木马动画发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap