利用3d云标签播放音乐

偶然看到3d云标签,感觉效果不错,就突发利用这个功能,做个简陋的网页播放,yy下。

    

               感觉还不错的,就是很多功能不完善,不过,满足一下我的3d视觉,感觉满足了。下面是截图


            说说主要的原理,非常简单,就是把原来的链接改成背景音乐播放,每个页面都嵌入index的源码,只是把背景音乐的链接改变。 

   

         下面是一些源码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312" />
<link rel="shortcut icon" href="yemeng.ico" /> 
<title>夜  盟</title>
<link rel="stylesheet" type="text/css" href="miaov_style.css" />
<script type="text/javascript" src="miaov.js"></script>
<script type="text/javascript" src="play.js"></script>
</head>




<body>


<div id="div1">
<a href="1.html" class="red">爱情剧终</a>
<a href="2.html" class="red">Chocolate Ice</a>
<a href="3.html" class="red">彩虹</a>
<a href="4.html" class="blue">董小姐</a>
<a href="5.html" class="red">分手假期</a>
<a href="6.html" class="red">搁浅</a>
<a href="7.html" class="yellow">黑暗骑士</a>
<a href="8.html" class="red">幻听</a>
<a href="9.html" class="red">回忆的沙漏</a>
<a href="10.html" class="red">落叶的悲伤</a>
<a href="11.html" class="blue">你把我灌醉(live版)</a>
<a href="12.html" class="red">你不是真正的快乐</a>
<a href="13.html" class="red">偶尔</a>
<a href="14.html" class="blue">人质</a>
<a href="15.html" class="red">喜欢你</a>
<a href="16.html" class="blue">小苹果</a>
<a href="17.html" class="red">洋葱</a>
<a href="18.html" class="red">一路向北</a>
<a href="19.html" class="red">月亮代表我的心</a>
<a href="20.html" class="red">翅膀</a>
<a href="21.html" class="red">羁绊</a>
<a href="22.html" class="red">青春乱</a>
<a href="23.html" class="red">宣言</a>
<a href="24.html" class="red">指针</a>
</div>
</body>
</html>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312" />
<link rel="shortcut icon" href="yemeng.ico" /> 
<title>夜  盟</title>
<link rel="stylesheet" type="text/css" href="miaov_style.css" />
<script type="text/javascript" src="miaov.js"></script>


</head>




<body>


<div id="div1">
<audio src="music/爱情剧终.mp3" id="audio1" hidden="true" autoplay="true" loop="true"></audio> 


<a>爱情剧终</a>
<a href="2.html" class="red">Chocolate Ice</a>
<a href="3.html" class="red">彩虹</a>
<a href="4.html" class="red">董小姐</a>
<a href="5.html" class="blue">分手假期</a>
<a href="6.html" class="red">搁浅</a>
<a href="7.html" class="red">黑暗骑士</a>
<a href="8.html" class="yellow">幻听</a>
<a href="9.html" class="red">回忆的沙漏</a>
<a href="10.html" class="red">落叶的悲伤</a>
<a href="11.html" class="red">你把我灌醉(live版)</a>
<a href="12.html" class="blue">你不是真正的快乐</a>
<a href="13.html" class="red">偶尔</a>
<a href="14.html" class="red">人质</a>
<a href="15.html" class="blue">喜欢你</a>
<a href="16.html" class="red">小苹果</a>
<a href="17.html" class="blue">洋葱</a>
<a href="18.html" class="red">一路向北</a>
<a href="19.html" class="red">月亮代表我的心</a>
<a href="20.html" class="red">翅膀</a>
<a href="21.html" class="red">羁绊</a>
<a href="22.html" class="red">青春乱</a>
<a href="23.html" class="red">宣言</a>
<a href="24.html" class="red">指针</a>
</div>
</body>
</html>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值