本文介绍了一种使用3D云标签制作简易网页播放器的方法。通过将原有链接替换为背景音乐播放，并在每个页面嵌入相同的源码实现不同歌曲的播放。此方法虽简单但能满足基本的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>
扫一扫
1522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
