唯美HTML5表白源码，移动端可播放音乐资源-CSDN下载

共8个文件

js：4个

css：2个

mp3：1个

4星 · 超过85%的资源需积分: 49 99 浏览量 2016-05-02 17:02:14 上传评论 9 收藏 4.11MB ZIP 举报

标题中的“唯美HTML5表白源码，移动端可播放音乐”揭示了这个压缩包包含的是一项使用HTML5技术制作的浪漫表白网页，具有音乐播放功能，特别适合在移动设备上展示。HTML5是现代网页开发的标准，它引入了许多新特性，如离线存储、媒体元素、canvas画布以及对SVG矢量图的支持等。在这个特定的应用中，关键的HTML5特性是`<audio>`标签，用于嵌入音频内容。描述中提到的“支持移动端播放audio”，意味着这个表白页面已经优化，可以在手机或平板电脑等移动设备上运行，用户可以听到预设的背景音乐，增强了情感表达的效果。在HTML5中，`<audio>`标签提供了在网页内播放音频的能力，它支持多种音频格式，如MP3、AAC、Ogg等。通过设置不同的属性，如`src`来指定音频源，`autoplay`自动播放，`loop`循环播放，以及`controls`显示播放控制条，开发者可以定制音频的播放行为。标签“表白”则暗示了这个项目可能包含温馨的视觉设计和甜蜜的音乐，为用户提供一个富有情感色彩的交互体验。在HTML5和CSS的配合下，开发者可以创建出各种动态效果，比如动画、过渡和变形，以增强表白页面的视觉吸引力。压缩包中的文件名称列表包括：index.html（主网页文件），luv.mp3（预设的背景音乐文件），js（JavaScript代码文件夹，可能包含实现动态效果和交互逻辑的脚本），以及css（样式表文件夹，用于定义网页的布局和外观）。在实际操作中，`index.html`是网页的入口文件，其中会引用`luv.mp3`作为音频资源，并可能使用JavaScript（可能位于`js`文件夹内的文件）来控制音频的播放，如响应用户的点击事件或者定时播放。而`css`文件夹中的样式表将决定页面的整体风格和元素布局，包括字体、颜色、动画等，以营造出浪漫唯美的氛围。这个压缩包提供了一个基于HTML5的表白网页模板，集成了音频播放功能，适用于移动端。开发者或使用者可以通过修改HTML和CSS代码，个性化定制表白页面，以传达独特的情感信息。

资源推荐

资源详情

资源评论

收起资源包目录

表白源码.zip （8个子文件）

luv.mp3 4.13MB

functions.js 4KB

jquery.js 90KB

audioplayer.js 8KB

garden.js 7KB

css

default.css 1KB

audio.css 10KB

index.html 4KB

<!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=utf-8" /> <title>一封小小的情书</title> <style type="text/css"> @font-face { font-family: digit; src: url('digital-7_mono.ttf') format("truetype"); } </style> <link href="css/default.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/garden.js"></script> <script type="text/javascript" src="js/functions.js"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?d11be0d4bffd42b30ecae2945da9df70"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </head> <body> <div id="mainDiv"> <div id="content"> <div id="code"> <span class="comments">你好哇，Miss Su</span><br /> <span class="space"/><span class="comments">这是一封小小的情书</span><br /> <span class="space"/><span class="comments">可能很枯燥.</span><br /> <span class="space"/><span class="comments">但是希望你能读完它。</span><br /> <br /> <br /> <br /> <span class="comments">有的人的喜欢，就像一场北方的雪，声势浩大但安静，话到嘴边但无法说出。 </span><br /> <span class="comments">我就是这样，表面上逗逗的什么都不在乎，但是在你身边却什么话也没有。</span><br /> <span class="comments">喜欢你，然后很在乎你，开始关注你情绪上的每一点波动。</span><br /> <span class="comments">为你喜，为你悲。</span><br /> <span class="comments">每当你不开心或者生病时，我都希望在你身边与你共患难的是我，</span><br /> <span class="comments">但是我没有办法。我不知道以我们现在的关系，我能做些什么。</span><br /> <span class="comments">伸出你的双手，我想给予你最温暖的光芒。</span><br /> <br /> <br /> <span class="comments">我一直都会在。</span><br /> <br> I want to say:<br /> Baby, I love you forever;<br /> </div> <div id="loveHeart"> <canvas id="garden"></canvas> <div id="words"> <div id="messages"> 我们已经相识了 <div id="elapseClock"></div> </div> <div id="loveu"> 陪伴是最长情的告白。<br/> <div class="signature">- Nsking</div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> var offsetX = $("#loveHeart").width() / 2; var offsetY = $("#loveHeart").height() / 2 - 55; var together = new Date(); together.setFullYear(2015, 10, 28); together.setHours(13); together.setMinutes(20); together.setSeconds(0); together.setMilliseconds(0); if (!document.createElement('canvas').getContext) { var msg = document.createElement("div"); msg.id = "errorMsg"; msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; document.body.appendChild(msg); $("#code").css("display", "none") $("#copyright").css("position", "absolute"); $("#copyright").css("bottom", "10px"); document.execCommand("stop"); } else { setTimeout(function () { startHeartAnimation(); }, 5000); timeElapse(together); setInterval(function () { timeElapse(together); }, 500); adjustCodePosition(); $("#code").typewriter(); } </script> <audio autoplay="autopaly"> <source src="http://my-love-forever.cn/luv.mp3" type="audio/mp3" /></audio> </body> </html>

评论收藏

内容反馈