为了账号安全,请及时绑定邮箱和手机立即绑定

H5新春贺卡之笔记

课程是前端中级课程

知识方面我们无可挑剔,html,css,javascript作为一个前端方面人员得必须熟练!不知道什么鬼来的,那得学习学习啦!

HTML元素参考

html5指南

css&css3

javascript

好了,现在该说说我从课程学到了什么和课程中会遇到的坑!权当课程学习的笔记!

从课程中我学到了什么,慕课中提及的我就省略了,没提及的,我就补充一下。

  • 结构与表现分离(web标准)

  • 代码的简洁与整洁(便于读源码和改源码)

  • 代码的注释(便于读源码和改源码)

一个项目从立项到完成!多多少少都得经历这样的一个过程:需求分析-开发-优化-发布。

很多人都是拿到任务就马上写代码,其实这不是一个好习惯,需求分析对自己代码构思很有帮助,如果简单页面,省去这步骤倒还不会挺麻烦!但是项目如果是中大型网站,没有详细分析好,后续会带来各种各样的问题,比如代码的冗余,多人合作产生的冲突,代码组织没有规律等等!

项目分析
  • 由于项目面对的是移动端用户,并且主题是新春主题,所以表现形式得欢快活泼!
  • 移动端项目,采用html作为结构层
  • 网页样式方面,小demo优先选用Css3
  • 项目过小,用原生javascript代替其他框架.
  • 项目涉及的特殊字体因为考虑到移动端并且有一定大小影响加载,所以采取图片代替
  • 图片方面尽可能压缩到无损最小值
  • 为了便于测试,使用WampServer为本地服务器测试环境
开发

- 切图

切图方面老师没怎么细讲,但我们还是得学呐!企业中,多数都是设计好psd图提供给前端人员,前端人员再跟设计师沟通,看这图怎么切!不会呐!那得学!

切图的软件有Photoshop,Fireworks。下面有个教程!会的巩固巩固,不会的学习学习!

前端工程师必备的PS技能——切图篇

- 搭建结构层

编程嘛!得有一个好的工具。开发工具很多,但最适合自己的才是最好的工具!

前端开发工具技巧介绍—DW篇

前端开发工具技巧介绍—Sublime篇

WebStorm 有哪些过人之处?

移动端开发都一个模板可套的!这是前辈们分享的经验也经过考验与验证了!

移动端页面开发资源总结

课程用到的很简单:

<!DOCTYPE html>
<html lang="Zh-cn">
<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, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>2016年慕课网新年特献</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/script.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
</body>
</html>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

以上代码IE = edge告诉IE使用最新的引擎渲染网页,chrome = 1则可以激活Chrome Frame .

“IE=Edge,chrome=1″这样简单快捷,但是弊端是代码将无法通过W3C验证。其实这并不是问题,毕竟标准只是标准。有时我们不能过于教条主义!

项目W3c验证

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/script.js" type="text/javascript" charset="utf-8" async defer></script>
  • width:可视区域的宽度,值可为数字或关键词device-width
  • intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
  • maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
  • maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
  • user-scalable:是否可对页面进行缩放,no 禁止缩放
  • 在iPhone 手机上默认值是(电话号码显示为拨号的超链接),可将telephone=no,则手机号码不被显示为拨号链接
  • script的async属性指示浏览器是否在允许的情况下异步执行该脚本
  • script的defer属性定义该脚本是否会延迟到文档解析完毕后才执行,兼容性不好。

主体代码值得注意的是代码编写时要预留id给javascript用于控制音乐的播放与暂停和三屏的切换!

<div id="music">
    <img class="music_disc music_play" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/music_disc.png">
    <img class="music_pointer" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/music_pointer.png">
</div>
<div class="page" id="page1">
    <div class="bg"></div>
    <div class="p1_lantern">点击屏幕<br>开启好运2016</div>
    <div class="p1_imooc"></div>
    <div class="p1_words">2016年慕课网新年特献</div>
</div>
<div class="page" id="page2">
    <div class="bg p2_bg_loading"></div>
    <div class="bg"></div>
    <div class="p2_circle" id="p2_circle"></div>
    <div class="p2_2016"></div>
</div>
<div class="page" id="page3">
    <div class="bg"></div>
    <div class="p3_logo"></div>
    <div class="p3_title"></div>
    <div class="p3_couplet_second couplet"></div>
    <div class="p3_couplet_first couplet"></div>
    <div class="p3_blessing"></div>
</div>
<audio autoplay="true">
    <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="audio/happynewyear.mp3" type="audio/mpeg">
</audio>

- 表示层

*{ margin: 0; padding: 0; border: none; font-size: 1.5625vw; font-family: "Microsoft YaHei"; }

CSS reset,大家最为熟悉的是“*”,这应该也是最早的CSS reset了,但这样重置样式,很多原有特性都被重置了,比如h系列标签的加粗,字号等等!
更好的写法是将常用的标签罗列出来并设置样式!更多的css重置请搜索了解!
但教程中的css为啥又用上通配符了呢?由于项目较小,涉及的标签也不多,这时偷个懒也情有可原的,有时我们不能太过于教条主义,受伤的不是谁,最终受伤还是写代码之人!

font-size: 1.5625vw;

为了不同屏幕的字体自适应。假设手机端的默认宽度640px,而1vw就相当于6.4px,1.5625vw刚刚为10px!知道怎么计算的话,后面的vw,vh也好理解了!像

div#music {top: 3vh; right: 4vw; width: 15vw; height: 15vw;}

扩展阅读:七个你可能不了解的CSS单位

由于是项目的全屏的多屏切换,所以html,body得设置

html,
body { height: 100%; overflow: hidden;}

div.page {height: 100%; }

背景图片不随页面宽高而改变,不急不急,Background-size来帮您!

background-size: 100%;

音乐图标由于是固定位置的!所以设置:

div#music { position: fixed;}

音乐图标这边怎么是方的,啊哈!Border-radius能有大作为了!

div#music { border-radius: 50%;}

第一屏的灯笼闪烁,再没接触伪元素的话,可能会选择内嵌一个div,但有伪元素实现起来就更好了!CSS3 选择器——伪类选择器

Element:before||:after {
content: '';//必加,不加撑不开容器的宽高
}

在设置灯笼的以及内容位置时,计算对应数值是很头痛的。比如本来宽度是640px,但要padding:5px,这是盒模型就被撑大了,但又为了控制好盒子宽度为640px,所以我们最终设置的宽度为630+5+5=640px!但有了Box-sizing,那就好办了!

  • box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
  • content-box,border和padding不计算入width之内
  • padding-box,padding计算入width内
  • border-box,border和padding计算入width之内

控制灯笼闪烁和音乐图标、福、三小圈转动都有用到Css3的AnimationTransform属性。

灯笼闪烁使用transform:scale(x,y);实现2d缩放!想实现这效果还得通过 @keyframes 规则!代码如下(兼容前缀已删,下面如有也是一样!):

div#page1 div.p1_lantern:before { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; width: 30vw; height: 30vw; margin: auto; content: ''; opacity: .5; border-radius: 50%; background: #d60b3b;
box-shadow: 0 0 10vw 10vw #d60b3b;
animation: p1_lantern_flash .5s infinite alternate;
//0.5s完成一次动画,
//infinite:规定动画应该无限次播放。
//alternate:动画应该轮流反向播放。
}
@keyframes p1_lantern_flash {
0% { opacity: .5;
transform: scale(.8, .8);
}
100% { opacity: 1; }
}

在第二屏的三小圈转动使用了transform:rotate(angle);实现2d旋转!
为什么旋转的度数要一正一反且不同度数,我的理解是我们要的效果是看出三小圈一起转动,如果都设置相同度数的话,最终看到的效果就是一个物体在转动而已!

拓展学习:CSS3模拟齿轮转动

福字转动类似音乐图标的实现!

第一屏到第二屏的切换由于切换没有等待效果,影响体验,所以增加

<div class="bg p2_bg_loading"></div>

并添加等待样式

div#page2 div.bg.p2_bg_loading { z-index: 4; background: #ef1639;animation: p2_bg_loading 1s linear forwards;
}
@keyframes p2_bg_loading {
0% { opacity: 1; }
100% { opacity: 0; }
}

第二屏切换到第三屏使用fadeout和fadein

div#page2.fadeout{
transform: translate(0,-100%);//滑动一个屏的高度
opacity: .3;
}

div#page3.fadein{
transform: translate(0,-100%);
}

- 动作层

由于onclick事件有300ms的延迟,并且项目面对的是移动端用户!所以改用触摸事件TouchEvent;控制音乐的暂停与播放是通过控制[audio](audio的API的!

music.addEventListener("touchstart", function() {
if (audio.paused) {
audio.play();
this.childNodes[1].setAttribute("class","music_disc music_play");
} else {
audio.pause();
this.childNodes[1].setAttribute("class","music_disc");
};
// if (audio.paused) {
// audio.play();
// this.childNodes[1].style.animationPlayState = "running";
// this.childNodes[1].style.webkitAnimationPlayState = "running";
// } else {
// audio.pause();
// this.childNodes[1].style.animationPlayState = "paused";
// this.childNodes[1].style.webkitAnimationPlayState = "paused";
// };
}, false);

人为控制音乐停止的话,动画也跟着停止,由于考虑到兼容性,弃用

this.childNodes[1].style.animationPlayState = "paused";
this.childNodes[1].style.webkitAnimationPlayState = "running";

改用移除或增加对应的class:music_play。

音乐总会有停止的时候,所以我们得通过addEventListener监听音乐的停止从而控制音乐磁盘停止转动!

audio.addEventListener('ended', function () {
music.childNodes[1].setAttribute("class","music_disc");
}, false);

到此,课程学习完毕!总的来说,课程干货很多!但测试方面很不足!这方面我们不能偷懒啊!这关乎代码能否正常显示的!整理得很急,如有错误,望帮忙纠正!不多说了,得去买菜煮饭去了!

点击查看更多内容
35人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消