阿里云动图icon vue组件封装（juery）

类似这么一张长图，让设计做运动轨迹图，鼠标经过、离开背景图片移动位置，进行运动。

工作中使用vue 需要传入参数，可以自行传入大小，但是需要计算比例值：

子组件：（需要的可以直接复制）

<template><div class="cd4 img" :data-max="max" :style="style"></div>
</template>
<script>
export default {data() {return {interval: null,};},props: {// 图片地址imgUrl: {type: String,default: "",},// 图片的个数max: {type: Number,default: 17,},// 图片的宽度width: {type: String,default: "140px",},// 单个图片的宽度height: {type: String,default: "140px",},},computed: {style() {return {backgroundImage: "url(" + this.imgUrl + ")",backgroundSize: "" + this.width + this.height * this.max + "",width: this.width,height: this.height,};},},created() {},mounted() {$(".img").each(function () {var $me = $(this);$me.data({nowStep: 0, //当前第几张图maxStep: $me.attr("data-max"), //图片的高度height: $me.height(), //图片的高度isOver: true, //鼠标是否移到上面active: false, //是否需要动起来});});$(".img").on("mouseover", function () {window.clearInterval(this.interval);this.interval = setInterval(bgMove, 30);$(this).data("isOver", true);$(this).data("active", true);}).on("mouseout", function () {window.clearInterval(this.interval);this.interval = setInterval(bgMove, 30);$(this).data("isOver", false);$(this).data("active", true);});function bgMove() {let flag = true;$(".img").each(function () {let $me = $(this);let nowStep = $me.data("nowStep");let maxStep = $me.data("maxStep");let height = $me.data("height");let isOver = $me.data("isOver");let active = $me.data("active");// 有鼠标操作if (active) {flag = false;// 移入if (isOver) {if (nowStep < maxStep - 1) {nowStep++;$me.data("nowStep", nowStep);$me.css({ "background-position-y": nowStep * -height });// 最后一帧 动画要停住} else {$me.data("active", false);}// 移出} else {if (nowStep > 0) {nowStep--;$me.data("nowStep", nowStep);$me.css({ "background-position-y": nowStep * -height });} else {$me.data("active", false);window.clearInterval(this.interval);}}}});// 没有在动的 就清除掉定时器if (flag) {window.clearInterval(this.interval);}}},methods: {},
};
</script><style scoped>
.cd4 {cursor: pointer;background-size: 100%;
}
</style>

引用方式：

<template><div><url:imgUrl="apngData.imgUrl":max="apngData.max":width="apngData.width":height="apngData.height"></url><url:imgUrl="apngData1.imgUrl":width="apngData1.width":height="apngData1.height":max="apngData1.max"></url><url:imgUrl="apngData2.imgUrl":width="apngData2.width":height="apngData2.height":max="apngData2.max"></url></div>
</template>
<script>
import url from "../../components/gif/index.vue";
export default {components: { url },data() {return {apngData: {imgUrl: require("../../assets/images/robit.png"),width: "80px",height: "80px",max: 29,},apngData1: {imgUrl: require("../../assets/images/222.png"),width: "200px",height: "200px",max: 21,},apngData2: {imgUrl: require("../../assets/images/111.png"),width: "30px",height: "30px",max: 21,},};},mounted() {},methods: {},
};
</script>

max：长图一共有多少个小图拼接而成；

width/height：图片宽高；

imgUrl：图片地址；

但是这个方法做出来的图，是行内样式，不适配，跟随屏幕大小改变而改变。

阿里云动图icon vue组件封装（juery）相关推荐

vue使用阿里云矢量图
vue使用阿里云矢量图在vue中虽然使用了elementui中的图标,但是会发现图标数量有限,不能够适(zhuang)用(bi)系统,因此在vue中使用阿里云矢量图. 添加矢量图到"购物车 ...
Vue 组件封装之 Carousel 轮播图
Vue 组件封装之 Carousel 轮播图一.Carousel 轮播图组件二.使用案例三.API 使用指南四.源代码一.Carousel 轮播图组件组件说明: 实现无缝轮播. 效果展示: ...
Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查前言一.Questionnaire 组件二.使用案例三.API 使用指南四.源代码前言问卷调查表也是目前前端比较常见的开发项目,目 ...
Vue 组件封装之 List 列表
Vue 组件封装之 List 列表一.List 列表二.使用案例三.API 使用指南四.源代码一.List 列表组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...
Vue 组件封装、组件传值、数据修改
Vue 组件封装封装的意义当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...
echarts vue组件封装
echarts vue组件封装为什么封装echarts组件 1.原生echarts不是vue组件风格的,不爽 2.原生echarts需要操作dom,麻烦 3.原生echarts没有响应式系统,太菜 ...
阿里云部署SpringBoot和Vue项目亲测可用（第一次部署经验贴）
阿里云部署SpringBoot和Vue项目亲测可用!第一次部署经验贴! 前言:与伙伴一起写了一个项目,但是由于老师要我们部署到服务器上,而我从未有部署过,查看了csdn很多博客,试了好多篇,才成功 ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
OSS（阿里云）图床搭建
OSS(阿里云)图床搭建 OSS(阿里云)图床搭建 OSS设置建立一个Bucket 获取ID和密钥值下载和配置PicGo 下载配置阿里云测试Typroa使用图床配置信息测试错误排查 OS ...

阿里云动图icon vue组件封装（juery）

阿里云动图icon vue组件封装（juery）相关推荐

最新文章

热门文章