需求一:页面有小动图点击放大并实现暂停与播放
1、页面调用+点击放大以及调用组件时实现标题效果
<div class="" v-show="WRFgif">
<img @click="bigWRFgif()" id="testImg" class="Rightoneimg" :src="接口获取的地址" alt="" />
</div>
//添加遮罩层,实现点击空白处关闭大图
<div class="msk" @click.self="bigWRFgifShow=false" v-show="bigWRFgifShow">
<div class="bigWRFgif" v-show="bigWRFgifShow">
<div class="titlebg">
<span class="text show_txt">WRF数据</span>
</div>
//调用播放、暂停组件;传值
<gifComponents :imgUrlGIF="接口获取的地址(同上)" :key="接口获取的地址(同上)" />
</div>
</div>
<script>
//引入组件(自定义名称)
import gifComponents from "../../components/gifComponents/index.vue";
return{
//默认不展示大的动图
bigWRFgifShow: false,
接口获取的地址:'',
}
components: {
gifComponents,
},
//写在页面里的调取接口的方法参照同系列其他文章
//点击事件-展示大图
bigWRFgif() {
this.bigWRFgifShow = !this.bigWRFgifShow
},
2、组件内容
<template>
<div class="gifComponents">
<!--gif动图 auto_play=0:自动播放;1:不自动播放-->
<div class="imgbox">
<img id="example1" :rel:animated_src="imgUrlGIF" :rel:auto_play="1" :rel:rubbable="1"/>
</div>
<br/>
<!--按钮-->
<div class="Buttonbox">
<div class="play">
<img @click="stopGif()" v-if="stop" class="startimg" src="@/assets/start.png" alt="" />
<img @click="stopGif()" v-else class="stopimg" src="@/assets/stop.png" alt="" />
</div>
</div>
</div>
</template>
<script>
// 引用libgif.js
import SuperGif from "./libgif.js";
export default {
name: "gifComponents",
// 接收父组件传递的参数
props: {
imgUrlGIF: {
type:String,
default:""
}
},
data() {
return {
sup1: null,//gif
stop: true,//是否暂停
};
},
//异步加载钩子函数
async mounted() {
try {
//初始化gif元素
this.InitSuperGif();
} catch (e) {
console.error("程序错误", e);
}
},
methods: {
//初始化gif元素
InitSuperGif() {
// 通过异步函数,获取gif文件
const sup1 = new SuperGif({
gif: document.getElementById("example1"),
progressbar_height: 0,//加载进度条高度
});
//加载元素
sup1.load();
this.sup1 = sup1;
},
//暂停
stopGif() {
if (this.stop) {
this.sup1.pause();
this.stop = false
} else {
this.sup1.play();
this.stop = true
}
}
},
};
</script>
<style lang="scss" scoped>
.gifComponents {
margin-top: 30px;
width: 100%;
.imgbox {
width: 100%;
height: 100%;
padding-left: 35px;
padding-top: 5%;
#example1{
position: absolute;
left: 50%;
top: 50%;
}
}
.Buttonbox {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
margin-left: 90px;
margin-top: 30px;
.play img{
position: absolute;
right: 30px;
}
.itembox {
width: 96px;
padding: 0 15px;
height: 32px;
line-height: 32px;
text-align: center;
white-space: nowrap;
cursor: pointer;
background: coral;
margin-right: 10px;
color: #fff;
&:hover {
background: rgb(219, 148, 122);
}
}
}
}
</style>
需求二:页面有列表小动图点击在旁边放大并实现暂停与播放
<div class=" center">
<div class="left">
<ul class="">
<li v-for="(item,index) in wrfList" :key="index" :class="[index===imgListIndex?'active':'']"
@click="setStyle(index)">
<span>{
{index+1}}</span>
<img :src="item">
</li>
</ul>
</div>
<div class="PAright">
//动态组件,组件内容用上面的即可
<gifComponentsRB :imgUrlGIF="rightImg" :key="rightImg" />
</div>
</div>
return{
imgListIndex: 0,
wrfList: [],
rightImg: '',
},
//websocket里部分内容
that.CL_Cnwebsocket.onmessage = function(res) {
let val = JSON.parse(res.data)
val = JSON.parse(val.listCLCN2)
let base_url = 'api'
that.wrfList = [];
for (let i = 0; i < val.length; i++) {
that.wrfList.push(base_url + val[i].cl_wrf_p);
}
if (that.rightImg === null || ('unknown')) {
that.rightImg = that.wrfList[0]
}
};
setStyle(index) {
this.imgListIndex = index
this.rightImg = this.wrfList[index]
},
3、JS文件//直接用即可
(function(root, factory) {
console.log("root", root)
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.SuperGif = factory();
}
}(this, function() {
// Generic functions
var bitsToNum = function(ba) {
return ba.reduce(function(s, n) {
return s * 2 + n;
}, 0);
};
var byteToBitArr = function(bite) {
var a = [];
for (var i = 7; i >= 0; i--) {
a.push(!!(bite & (1 << i)));
}
return a;
};
// Stream
/**
* @constructor
*/
// Make compiler happy.
var Stream = function(data) {
this.data = data;
this.len = this.data.length;
this.pos = 0;
this.readByte = function() {
if (this.pos >= this.data.length) {
throw new Error('Attempted to read past end of stream.');
}
if (data instanceof Uint8Array)
return data[this.pos++];
else
return data.charCodeAt(this.pos++) & 0xFF;
};
this.readBytes = function(n) {
var bytes = [];
for (var i = 0; i < n; i++) {
bytes.push(this.readByte());
}
return bytes;
};
this.read = function(n) {
var s = '';
for (var i = 0; i < n; i++) {
s += String.fromCharCode(this.readByte());
}
return s;
};
this.readUnsigned = function() { // Little-endian.
var a = this.readBytes(2);
r