明天就是情人节了，程序猿屌丝们是不是都是单身dog呢？今年很罕见，我不是单身啦。情人节老送花啊，巧克力啊，戒指，耳环啊等等这些东西当然。。。。不可避免啦。我们程序猿应该有我们自己的素养和浪漫情怀，今天我做了一个界面送给我的女朋友，用来表达我的爱意。界面打开后自动播放“滴答”的音乐，字幕像电影开场一样，一点一点的显示出来，引人入胜。其实我还做了另一个界面，类似微信里滑一滑翻页的效果，每个界面是我和女朋友去的地方的合照，当然，这个也要有配乐才有赶脚噢。这个界面代码以后有时间再放上来呀。闲话少说，show me the code.
目录结构：
MyLove/
/css
/js
/music
myword.html
代码如下：
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyWord</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.js"></script>
</head>
<body>
<div class="container">
<div class="os-phrases" id="os-phrases">
<h2>这个画面</h2>
<h2>送给</h2>
<h2>My Lover</h2>
<h2>美女</h2>
<h2>感谢你</h2>
<h2>出现在</h2>
<h2>我的世界</h2>
<h2>我希望</h2>
<h2>我们可以</h2>
<h2>开开心心</h2>
<h2>一起慢慢变老</h2>
</div>
</div><!-- /container -->
<audio controls autoplay>
<source src="music/my.mp3" />
cannot play
</audio>
<script src="js/jquery.js"></script>
<script src="js/jquery.lettering.js"></script>
<script>
$(document).ready(function() {
$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();
})
</script>
</body>
</html>
这个界面算不上多完美和华丽，用了jquery的一个文字插件。女朋友名字就不写了。所有代码和歌曲都在附件中，主要是歌曲比较大，我在我电脑上能找到的为数不多的歌曲了。。。原谅我吧，音乐和美感造诣不深的程序猿。
PS:本来要做成一个android应用，cordova工程已经建好，将代码放到www目录里，安装后，界面根本跑不起来，我安装在小米2s上的，看来很多CSS3的特性在移动端webkit内核中还是不甚理想，也可能我搞得有问题？回头再看看吧，之后将代码放到手机里，用手机浏览器进行了测试，内置的safari和自己安装的chrome浏览器打开后都能完美展现，但是音乐貌似不能自动播放，需要手动点击播放按钮才行。PC端用chrome、firefox浏览器打开均可自动播放音乐。不好意思，IE浏览器我直接忽略了。
不喜欢上面做的也可以喷啊。。。
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
