JS九宫格图片点击播放音乐特效代码下载


JS九宫格图片点击播放音乐特效代码下载
JS九宫格图片点击播放音乐特效代码下载以及九宫格图片、点击播放音乐等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/main.js"></script>

2. HTML代码

<div id="app">
	<div class="box">
		<ul class="clearfix minBox" id="minBox">
			<li v-for="(item,index) in list" :key="item.index" @click="itemClick(item.index)" v-show="item.itemShow">
				<img :src="item.imgSrc" />
				<audio @timeupdate="audioTime(index)">
					<source :src="item.muSrc" type="audio/ogg">
				</audio>
				<div class="imgBg" v-show="!item.bgShow">
					<img :src="item.imgState?'img/open.png':'img/over.png'" />
				</div>
			</li>
		</ul>
		<div class="imgFrame clearfix" v-show="frameShow">
			<div class="arrowFrame">
				<img src="img/jtl.png" @click="belowClick" />
				<img src="img/jtr.png" @click="upwardClick" />
			</div>
			<div class="sortFrame" @click="sortClick">
				<img src="img/zhonglei.png" />
			</div>
		</div>
	</div>
</div>
<script>
	var app = new Vue({
		el: "#app",
		data() {
			return {
				list: [{
						index: "0",
						imgSrc: "img/jt1.png",
						itemShow: true,
						imgState: true,
						muSrc: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201912/12287.mp3',
						bgShow: true
					},
					{
						index: "1",
						imgSrc: "img/jt2.png",
						itemShow: true,
						imgState: true,
						muSrc: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201912/12287.mp3',
						bgShow: true
					},
					{
						index: "2",
						imgSrc: "img/jt3.png",
						itemShow: true,
						imgState: true,
						muSrc: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201912/12287.mp3',
						bgShow: true
					},
					{
						index: "3",
						imgSrc: "img/jt4.png",
						itemShow: true,
						imgState: true,
						muSrc: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201912/12287.mp3',
						bgShow: true
					},
					{
						index: "4",
						imgSrc: "img/jt5.png",
						itemShow: true,
						imgState: true,
						muSrc: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201912/12287.mp3',
						bgShow: true
					},
					{
						index: "5",
						imgSrc: "img/jt6.png",
						itemShow: true,
						imgState: true,
						muSrc: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201912/12287.mp3',
						bgShow: true
					},
					{
						index: "6",
						imgSrc: "img/jt7.png",
						itemShow: true,
						imgState: true,
						muSrc: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201912/12287.mp3',
						bgShow: true
					},
					{
						index: "7",
						imgSrc: "img/jt8.png",
						itemShow: true,
						imgState: true,
						muSrc: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201912/12287.mp3',
						bgShow: true
					},
					{
						index: "8",
						imgSrc: "img/jt9.png",
						itemShow: true,
						imgState: true,
						muSrc: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201912/12287.mp3',
						bgShow: true
					}
				],
				frameShow: false,
				imgIndex: 0,
				imgTimer: null,
				sortIndex: 0,
				sortTimer: null,
				orderIndex: 0
			}
		},
		methods: {
			audioTime(index) {
				var oBox = document.getElementById('minBox');
				var aLi = oBox.getElementsByTagName('li');
				var aAutio = oBox.getElementsByTagName('audio');
				if((aAutio[index].currentTime).toFixed(2) >= ((aAutio[index].duration).toFixed(2) - 0.2)) {
					aAutio[index].pause();
					this.list[index].imgState = true
				}
			},
			itemClick(index) {
				var oBox = document.getElementById('minBox');
				var aLi = oBox.getElementsByTagName('li');
				var aAutio = oBox.getElementsByTagName('audio');
				clearInterval(this.imgTimer);
				clearInterval(this.sortTimer);
				this.list[index].imgState = !this.list[index].imgState;
				if((aAutio[index].currentTime).toFixed(2) >= ((aAutio[index].duration).toFixed(2) - 0.2)) {
					aAutio[index].currentTime = 0
					aAutio[index].play();
					this.list[index].imgState = false;
				} else {
					for(var i in this.list) {
						this.list[i].bgShow = true;
						aAutio[i].pause();
						aLi[i].className = '';
					}
					this.list[index].bgShow = false;
					this.imgTimer = setInterval(() => {
						if(this.imgIndex >= aLi.length) {
							clearInterval(this.imgTimer)
							this.imgIndex = 0
						} else if(this.imgIndex == index) {
							this.list[this.imgIndex].itemShow = true;
							this.imgIndex++
								this.list[this.imgIndex].itemShow = false;
						} else {
							this.list[this.imgIndex].itemShow = false;
							this.imgIndex++
						}
					}, 200)
					if(!this.list[index].imgState) {
						this.frameShow = true;
						this.list[index].bgShow = false;
						aAutio[index].play()
					} else {
						for(var k in this.list) {
							this.list[k].bgShow = true;
							aAutio[k].pause();
						}
						this.list[index].bgShow = false;
						aAutio[index].pause();
						this.list[index].imgState = true
					}
					aLi[index].className = 'newItem';
					for(var j in this.list) {
						if(this.list[j].bgShow == false) {
							index = j
						}
					}
					this.sortIndex = index;
				}
			},
			sortClick() {
				var oBox = document.getElementById('minBox');
				var aLi = oBox.getElementsByTagName('li');
				var aAutio = oBox.getElementsByTagName('audio');
				this.sortTimer = setInterval(() => {
					if(this.orderIndex >= aLi.length) {
						clearInterval(this.sortTimer)
						this.orderIndex = 0
					} else {
						this.list[this.orderIndex].itemShow = true;
						this.orderIndex++;
						aLi[this.sortIndex].className = '';
					}
				}, 200)
			},
			belowClick() {
				var oBox = document.getElementById('minBox');
				var aLi = oBox.getElementsByTagName('li');
				var aAutio = oBox.getElementsByTagName('audio');
				for(var i = 0; i < aLi.length; i++) {
					aLi[i].className = '';
					aAutio[i].pause();
					this.list[i].bgShow = true;
					this.list[i].itemShow = false
				}
				this.sortIndex++
					aLi[this.sortIndex].className = 'newItem';
				this.list[this.sortIndex].imgState = false;
				aAutio[this.sortIndex].play();
				this.list[this.sortIndex].bgShow = false;
				this.list[this.sortIndex].itemShow = true
			},
			upwardClick() {
				var oBox = document.getElementById('minBox');
				var aLi = oBox.getElementsByTagName('li');
				var aAutio = oBox.getElementsByTagName('audio');
				for(var i = 0; i < aLi.length; i++) {
					aLi[i].className = '';
					aAutio[i].pause();
					this.list[i].bgShow = true;
					this.list[i].itemShow = false
				}
				if(this.sortIndex <= 0) {
					this.sortIndex = 0
					aAutio[this.sortIndex].play();
					this.list[this.sortIndex].bgShow = false;
					this.list[this.sortIndex].itemShow = true;
					aLi[this.sortIndex].className = 'newItem';
				} else {
					this.sortIndex--
					aAutio[this.sortIndex].play();
					this.list[this.sortIndex].bgShow = false;
					this.list[this.sortIndex].itemShow = true;
					this.list[this.sortIndex].imgState = false;
					aLi[this.sortIndex].className = 'newItem';
				}
			}
		}
	})
</script>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章