`

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

阅读更多

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

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

2
0
分享到:
评论
15 楼 weibo227 2015-02-14  
问一下   照片怎么加进去啊?
14 楼 zhangzhaoaaa 2015-02-14  
weibo227 写道
要是懂  android的,可以将这个弄成app,那就更加帅气了!!!

是的,我本意想做成个app,放进去代码显示不出来,加上时间紧凑,就没去搞,有时间去看看怎么回事,如果有朋友有时间搞出来的话,先分享一下哈,今儿我得过节啦哈
13 楼 weibo227 2015-02-14  
要是懂  android的,可以将这个弄成app,那就更加帅气了!!!
12 楼 weibo227 2015-02-14  
9楼的,在添加文字的同时,你必须添加对应的.os-phrases h2:nth-child(13) > span > span > span {
-webkit-animation-delay: 58s;
-moz-animation-delay: 58s;
animation-delay: 58s;
}  这里可以设置文字的具体样式   以及延长显示的时间
11 楼 zhao_rock 2015-02-14  
我只是菜鸟,觉得做些这样的东西出来,挺有意思的,也体现着独一无二的心意,或许也能改变大家对程序员的看法吧,我们也是懂浪漫的嘿嘿
10 楼 zhangzhaoaaa 2015-02-14  
lihua2008love 写道
为什么加了些文字就乱了?

请看源码,需要加CSS动画效果,每一行都是有时间延迟出现的,大概4到5秒,依次类推
9 楼 lihua2008love 2015-02-14  
为什么加了些文字就乱了?
8 楼 zhangzhaoaaa 2015-02-14  
zhao_rock 写道
放点你们在一起时的照片,加上文字就更帅啦,我也做过类似的东西,顶一个

哈哈,是啊,我做了一个滑动照片的,有配乐和文字的,看来兄台是前辈啊
7 楼 zhao_rock 2015-02-14  
放点你们在一起时的照片,加上文字就更帅啦,我也做过类似的东西,顶一个
6 楼 chenzheng8975 2015-02-14  
5 楼 唐朝法律 2015-02-13  
4 楼 jadymrhu 2015-02-13  
3 楼 uule 2015-02-13  
2 楼 青云911 2015-02-13  
1 楼 zhs19880321 2015-02-13  
不错,我们程序猿就应该多做点实用的东西,做点虽然粗糙,不过是好想法,看着我也想试着做点东西了

相关推荐

    Delphi 12.3控件之LMD VCL 2024.4 for D12+crack.7z

    Delphi 12.3控件之LMD VCL 2024.4 for D12+crack.7z

    基于DSP28335的单相锁相环(SPLL)实现及其在电力电子中的频率与相位跟踪应用

    内容概要:本文详细介绍了单相锁相环(SPLL)在TI公司DSP28335芯片上的实现方法及其在电力电子中的应用。主要内容涵盖锁相环的基本概念、DSP28335的硬件配置、SPLL算法的具体实现步骤,包括初始化、相位误差计算、PI控制器的设计、频率和相位的更新机制,以及如何应对电网扰动等问题。此外,文中还提供了详细的代码片段和调试技巧,帮助读者更好地理解和实现SPLL。 适用人群:从事电力电子、自动化控制、嵌入式系统的工程师和技术人员,尤其适用于有一定DSP编程基础的研发人员。 使用场景及目标:① 实现单相锁相环在DSP28335上的稳定运行;② 提供频率和相位跟踪的功能,确保系统在不同电网条件下的稳定性和可靠性;③ 通过调试和优化,提高系统的响应速度和控制精度。 其他说明:文章不仅提供了理论解释,还有具体的代码实现和调试建议,有助于读者快速掌握SPLL的实现方法并在实际项目中应用。

    基于MATLAB设计的 GUI漂浮物垃圾分类检测(高分项目).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载

    基于前景与背景分割的图像处理:MATLAB实现流行排序模型及其优化

    内容概要:本文详细介绍了基于前景和背景分割的图像处理技术,特别是流行排序模型的MATLAB实现。文章首先解释了图像分割的基本概念以及流行排序模型的工作原理,指出传统模型存在的图结构和边缘权值问题,并提出改进措施。接着,通过具体的MATLAB代码展示了如何读取图像、构建图结构、设置边缘权值、利用标记点进行流形排序,最终实现图像分割。文中还讨论了多种优化手段,如k近邻动态调整图结构、高斯核计算权值、加入坐标信息等,以提高分割精度和效率。此外,针对大尺寸图像提出了超像素预处理的方法。 适合人群:对图像处理感兴趣的科研人员、学生以及有一定编程基础的开发者。 使用场景及目标:适用于需要精确分离图像中前景和背景的应用场合,如医学影像分析、自动驾驶、安防监控等领域。目标是帮助读者掌握基于图的流形排序模型的具体实现方法和技术要点,从而应用于实际项目中。 其他说明:文章提供了完整的MATLAB代码示例,便于读者理解和实践。同时强调了算法的灵活性和可扩展性,鼓励读者尝试不同的参数配置和优化策略,以获得更好的分割效果。

    基于MATLAB的界面GUI信号与系统数字信号设计(高分项目).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载

    C#实现OPC UA/DA通信:工业上位机必备的无界面通信代码模板

    内容概要:本文详细介绍了使用C#实现OPC UA和OPC DA通信的方法,提供了完整的代码示例。首先讲解了OPC DA的实现方式,包括连接服务器、创建组和读取标签的具体步骤,并强调了需要注意的细节如DCOM权限和异常处理。接着深入探讨了OPC UA的实现,推荐使用OPCFoundation的官方库,涵盖了连接设置、节点读取以及证书处理等内容。文中还分享了一些实战经验,如性能优化技巧、异常处理策略和常见的错误解决办法。 适合人群:从事工业自动化领域的开发人员,尤其是需要与PLC进行数据交换的技术人员。 使用场景及目标:适用于需要快速搭建工业上位机通信系统的开发者,帮助他们掌握OPC UA和OPC DA的基本实现方法,确保在实际项目中能够稳定可靠地进行数据采集和传输。 其他说明:文中提供的代码均为控制台应用程序形式,便于集成到现有项目中。同时提醒开发者在生产环境中务必谨慎处理安全性相关的问题,如证书管理和权限配置。

    空气弹簧对车辆曲线通过性能的影响

    空气弹簧对车辆曲线通过性能的影响

    1fd6d71d-0fda-4728-91c4-90b50fe43b0.zip

    1fd6d71d-0fda-4728-91c4-90b50fe43b0.zip

    安川伺服驱动器调试工具SigmaWin+各版本特性与应用详解

    内容概要:本文详细介绍了安川伺服驱动器调试工具SigmaWin+的不同版本及其应用场景。主要内容涵盖7系列、5系列和3系列软件的特点、适用范围以及常见问题解决方法。文中提供了大量实用的代码片段,帮助工程师更好地理解和使用这些工具进行参数设置、故障排除和性能优化。同时强调了正确选择软件版本的重要性,并分享了一些避免常见错误的经验。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是那些需要频繁调试安川伺服驱动器的专业人士。 使用场景及目标:①掌握不同版本SigmaWin+的功能特点及最佳实践;②提高伺服驱动器调试效率,减少人为失误;③利用提供的代码片段加速特定任务的完成,如参数设置、自动化测试等。 其他说明:文章不仅解释了各个版本的技术细节,还给出了许多实际操作中的技巧和注意事项,旨在帮助读者更加高效地运用SigmaWin+进行日常维护和支持工作。此外,作者还特别提到了关于版本选择、多语言支持等方面的潜在陷阱,提醒使用者谨慎对待。

    JAVA源码 + SpringBoot+vue+mysql 校园共享系统 + 数据库 + 文档

    内含文档,可轻松上手。

    Delphi 12.3控件之TMS VCL UI Pack v13.1.8.0.7z

    Delphi 12.3控件之TMS VCL UI Pack v13.1.8.0.7z

    ssm高校课程评价系统 LW PPT.zip

    Java项目基于ssm框架的课程设计,包含LW+ppt

    Delphi 12.3控件之EhLibInstaller D12.exe

    Delphi 12.3控件之EhLibInstaller D12.exe

    毛玻璃拟态UI个人引导页优化版.zip

    毛玻璃拟态UI个人引导页优化版,文本可编辑,自适应可换背景。

    30kW三相PFC充电桩核心技术解析:基于TMS320F28069的高精度控制与算法实现

    内容概要:本文深入探讨了一款30kW三相PFC充电桩的技术细节,涵盖硬件设计、主控芯片选择、关键算法实现及其性能表现。文中详细介绍了主电路采用的T型三相维也纳结构,主控芯片TMS320F28069的特点及其应用,包括CLA协处理器的优势。同时,对锁相环算法、PWM控制、中点平衡控制等进行了详细的解释,并提供了相应的代码示例。此外,还分享了一些实战经验和注意事项,如DQ变换的正确实现、滞回控制的应用技巧等。最后,附上了27页的量产测试报告,展示了该程序在实际生产环境中的稳定性和可靠性。 适合人群:从事电力电子、嵌入式系统开发的专业人士,尤其是对大功率充电设备感兴趣的工程师和技术爱好者。 使用场景及目标:适用于希望深入了解30kW三相PFC充电桩内部工作机制的研发人员。通过学习本文,可以掌握从硬件设计到软件实现的完整流程,为类似项目提供宝贵的参考资料和技术支持。 其他说明:本文不仅提供了理论知识,还结合了大量的实战经验,帮助读者避免常见陷阱,提高开发效率。

    昆仑通态触摸屏与国产380系统变频器的485Modbus通讯控制及参数设置详解

    内容概要:本文详细介绍了如何利用昆仑通态触摸屏通过RS485接口和Modbus协议控制国产380系列变频器。主要内容涵盖硬件连接、Modbus地址映射、控制命令(如启停和频率设定)、参数读取方法以及常见的调试技巧和注意事项。文中提供了具体的Python和VB代码示例,帮助用户理解和实现相关功能。此外,还分享了一些实战经验,如终端电阻的正确使用、数据格式转换、通讯参数配置等。 适用人群:从事工业自动化领域的工程师和技术人员,尤其是对Modbus协议和变频器控制有一定了解的从业者。 使用场景及目标:适用于需要通过昆仑通态触摸屏远程控制国产380系列变频器的应用场合,旨在提高系统的集成度和灵活性,降低硬件成本,提升工作效率。 其他说明:文章强调了实际操作中的细节和易错点,如寄存器地址的十进制与十六进制转换、数据字节序问题、通讯超时设置等,确保用户能够顺利进行系统搭建和调试。

    AI深度思考大模型Deepseek-清华大学使用指南及技巧大全

    AI深度思考大模型Deepseek-清华大学使用指南及技巧大全

    西门子S7-1200 PLC伺服电机运动控制FB功能块:集成化脉冲控制与多样化功能实现

    内容概要:本文详细介绍了作者自行开发的一个用于西门子S7-1200 PLC的伺服电机控制功能块(FB),该功能块集成了多种常用的伺服控制功能,如一键上电使能、绝对/相对定位、极限反转回原点、故障自检及状态LED显示等。文中展示了具体的代码实现,包括状态机设计、回原点逻辑、错误处理机制以及参数配置等方面的内容。此外,作者分享了实际应用中的优化技巧,如软启动延时、状态监控和心跳检测等。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是熟悉西门子PLC编程并希望提高伺服控制系统效率的人群。 使用场景及目标:适用于需要高效、稳定地控制多台伺服电机的应用场合,如生产线、包装机等。主要目标是简化伺服控制逻辑,减少调试时间和维护成本,同时提供可靠的故障诊断和状态监测功能。 其他说明:该功能块不仅提高了开发效率,还在多个实际项目中得到了验证,显著缩短了调试周期。作者强调了良好的接口设计和灵活的参数设置对于适应不同机械设备的重要性。

    ssm党务政务服务热线平台设计与实现 LW PPT.zip

    Java项目基于ssm框架的课程设计,包含LW+ppt

Global site tag (gtag.js) - Google Analytics