H5前端开发笔记（一）
一、人生四时(PC)
CSS3的animation
用于首页火柴效果与云彩效果
火柴：
经测验CSS3的写法可以完美实现帧动画，尽管IE8及以下不支持，而使用jquery会有明显的卡顿。
@-webkit-keyframes fire {
0% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/1.png);
}
5% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/2.png);
}
10% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/3.png);
}
15% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/4.png);
}
20% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/5.png);
}
25% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/6.png);
}
30% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/7.png);
}
35% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/8.png);
}
40% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/9.png);
}
45% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/10.png);
}
50% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/11.png);
}
55% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/12.png);
}
60% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/13.png);
}
65% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/14.png);
}
70% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/15.png);
}
75% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/16.png);
}
80% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/17.png);
}
84% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/18.png);
}
88% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/19.png);
}
92% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/20.png);
}
96% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/21.png);
}
100% {background-image:url(http://mat1.gtimg.com/news/2015/zt/huozhe5/fire/22.png);
}
}
.fire{
-webkit-animation:fire 5s forwards; /* Safari and Chrome */
}云彩：
定义了大量的绝对定位的云彩div，然后每一个让其原地缓慢旋转。
@-webkit-keyframes cloud
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}如果是不支持animation的低版本IE，则采用简单的jquery动画实现线性移动。
$("#cloud1").animate({
top: '65%', left: '65%'
}, 5000);
$("#cloud1").animate({
top: '70%', left: '70%'
}, 5000);二、红场直播（PC）
1.计时器
原生js实现了计时器功能，根据具体的播放开始结束时间，给出相应的倒计时和提示。（核心：Date（）和setInterval）
$(function(){
var StartTime= new Date(page_config.concert.startTime);
var EndTime= new Date(page_config.concert.endTime);
function GetTime(){
var NowTime = new Date();
var t1 =StartTime.getTime() - NowTime.getTime();
var t2 =EndTime.getTime() - NowTime.getTime();
var h=Math.floor(t1/1000/60/60);
var m=Math.floor(t1/1000/60%60);
var s=Math.floor(t1/1000%60);
if(t1>=3600000) {
document.getElementById('nowtime').innerHTML = "距直播开始剩： " + h + "小时 " + m + "分钟";
}
else if(t1>=0){
document.getElementById('nowtime').innerHTML = "距直播开始 " + h + "时 " + m + "分 " + s + "秒";
}
else if(t2>=0){
document.getElementById('nowtime').innerHTML = "正在直播";
}
else{
document.getElementById('nowtime').innerHTML = "直播已结束";
}
}
setInterval(GetTime,1000);
});2.带按钮的图片轮播
js代码：
$(document).ready(function(e) {
/***不需要自动滚动，去掉即可
time = window.setInterval(function(){
$('.og_next').click();
},2000);
不需要自动滚动，去掉即可***/
linum = $('.mainlist li').length;//图片数量
w = linum * 198;//ul宽度
$('.piclist').css('width', w + 'px');//ul宽度
$('.swaplist').html($('.mainlist').html());//复制内容
$('.og_next').click(function(){
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length>5){//多于5张图片
ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
if(ml<=0 && ml>w*-1){//默认图片显示时
$('.swaplist').css({left: '1000px'});//交换图片放在显示区域右侧
$('.mainlist').animate({left: ml - 990 + 'px'},'slow');//默认图片滚动
if(ml==(w-990)*-1){//默认图片最后一屏时
$('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
}
}
else{//交换图片显示时
$('.mainlist').css({left: '1000px'})//默认图片放在显示区域右
$('.swaplist').animate({left: sl - 990 + 'px'},'slow');//交换图片滚动
if(sl==(w-990)*-1){//交换图片最后一屏时
$('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
}
}
}
})
$('.og_prev').click(function(){
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length>5){
ml = parseInt($('.mainlist').css('left'));
sl = parseInt($('.swaplist').css('left'));
if(ml<=0 && ml>w*-1){
$('.swaplist').css({left: w * -1 + 'px'});
$('.mainlist').animate({left: ml + 990 + 'px'},'slow');
if(ml==0){
$('.swaplist').animate({left: (w - 990) * -1 + 'px'},'slow');
}
}
else{
$('.mainlist').css({left: (w - 990) * -1 + 'px'});
$('.swaplist').animate({left: sl + 990 + 'px'},'slow');
if(sl==0){
$('.mainlist').animate({left: '0px'},'slow');
}
}
}
})
});
$(document).ready(function(){
$('.og_prev,.og_next').hover(function(){
$(this).fadeTo('fast',1);
},function(){
$(this).fadeTo('fast',0.7);
})
})HTML：
<div class="carousel">
<div class="carousel_title">div>
<div class="box">
<div class="picbox">
class="piclist mainlist">
*n
class="piclist swaplist">
div>
<div class="og_prev">div>
<div class="og_next">div>
div>
div>三、你好童年（移动）
1.触屏滑动
关于触屏滑动的解决方案，最便捷的是zepto，除此外还有一个插件叫做touchSwipe。成熟却臃肿的jquery mobile只支持左右滑动。
这里采用了插件：
callback:function(){
$('.section1').swipe({
swipeUp: function(event, direction, distance, duration, fingerCount){
...
}
});
}2.jquery部分方法运用
替换图片：
$("#q1_b>img").attr("src","http://mat1.gtimg.com/news/2015/zt/childrenday/img/q/q1_b_hover.png");
屏幕翻页：
setTimeout("$('.section').animate({top:'-500%'},600)",200,'linear');
当运用CSS3完成动画时，可通过js调用不同的class来完成事件触发。
动态加载DOM：
$(".sectionq").append('...');
四、其他
1. 网页头部和流量统计，务必记得加上。
2. 关于性能优化：
（1）不影响清晰度的前提下尽量压缩图片、.css和.js文件。
（2）将外链js的文件放在代码底部延时加载，确保页面结构先加载好再涉及到动效。
（3）尽量减少页面原有的DOM节点数量，通过js动态加载来填充。
（4）在写页面时，尽量用更简洁更“高级”的写法，减少代码量以及切图量。