当前位置:首页 > 开发 > Web前端 > 前端 > 正文

情人节表白话像电影字幕一样呈现

发表于: 2015-02-13   作者:zhangzhaoaaa   来源:转载   浏览:
摘要:         明天就是情人节了,程序猿屌丝们是不是都是单身dog呢?今年很罕见,我不是单身啦。情人节老送花啊,巧克力啊,戒指,耳环啊等等这些东西当然。。。。不可避免啦。我们程序猿应该有我们自己的素养和浪漫情怀,今天我做了一个界面送给我的女朋友,用来表达我的爱意。界面打开后自动播放“滴答”的音乐,字幕像电影开场一样,一点一点的显示出来,引人入胜。其实我还做了

        明天就是情人节了,程序猿屌丝们是不是都是单身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浏览器我直接忽略了。

     不喜欢上面做的也可以喷啊。。。

情人节表白话像电影字幕一样呈现

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
这是迄今为止,我觉得最讲究的一部电影,没有之一。 讲究到哪种地步呢?每一个画面都做到极致,我甚
《像程序员一样思考》 基本信息 作者: V.Anton Spraul 译者: 徐波 出版社:人民邮电出版社 ISBN:
一、概述   本节来看一下ASP.NET MVC【View的呈现】的内容,View的呈现是在Action执行之后进行,A
本节将接着《白话学习MVC(九)View的呈现一》来继续对ViewResult的详细执行过程进行分析! 9、ViewRe
《像外行一样思考,像专家一样实践》---智慧的源泉 首先,我要阐明一下,这本书适合大学生,而我就
“像外行一样思考,像专家一样实践”,你是否已经理解并在践行这句话? 这是一本书的名字,作者是美
“像外行一样思考,像专家一样实践”,你是否已经理解并在践行这句话? 这是一本书的名字,作者是美
不错的文章,转自:http://blog.csdn.net/u010850027/article/details/44804017 像专家一样思考,像
像专家一样思考,像专家一样实践 第一眼看到这本书的标题,像外行一样思考,像专家一样实践,温馨提
像外行一样思考,像专家一样实践,不只是说说而已。---题记 看了试读的章节有些日子,看完了试读部
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号