项目介绍
妙味课堂仿cctv项目
移动端准备工作
viewport
这里根据psd，宽度为640，所以使用了下面的meta
<meta name="viewport" content="width=640,user-scalable=no" />这样设置之后，即使模拟器在苹果4(320*480)下，使用px来css也可以根据缩放比适当缩放。
section
这是一个单页项目。所有的页面都在一个html里面展示，每个页面都使用section单独展示。
<body>
<section class="page pageShow">欢迎页</section>
<section class="page">上传成功</section>
<section class="page">表单页面</section>
<section class="page">新闻页面</section>
<section class="page">跳转页面</section>
<section class="page pageShow">首页</section>
</body>每个section的高度都为屏幕的高度，section之间的切换使用css控制。
每一个section的层级关系z-index不一样
.page:nth-of-type(1){z-index: 10;}
.page:nth-of-type(2){z-index: 9;}
.page:nth-of-type(3){z-index: 8;}
.page:nth-of-type(4){z-index: 7;}
.page:nth-of-type(5){z-index: 6;}section的高度为屏幕的高度。这里引入一个外部index.js文件view()。然后高度由js控制。
<script type="text/javascript">
window.onload = function () {
document.body.style.height = view().h+"px";
}
</script>代码详见github;
移动端“入场页面”布局
因为设置了viewport，所以可以使用px进行布局（不同分辨率屏幕会根据缩放比缩放）。
这里主要是一些静态页面布局。
代码详见github;
移动端“入场页面”动画制作
入场动画，animate
包括tree，logo，shake，cloud等。
如下tree的animate的写法。注意浏览器兼容。
@-webkit-keyframes tree{
100%
{
-webkit-transform:translateY(0);
opacity: 1;
}
}
@keyframes tree{
100%
{
transform:translateY(0);
opacity: 1;
}
}
.tree {position: absolute;left: 0 ;top: 10%;width: 100%;-webkit-transform:translateY(100px);transform:translateY(100px);opacity: 0;animation:1s tree;-webkit-animation:1s tree;-webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;}
css定义初始透明度为0，向下100px，定义动画，最后定格动画 animation-fill-mode:forwards;
代码详见github;
shake 抖动以及云彩飘 请看代码，注意这里有变换起点。
注意云彩动画的时候
animation:cloud 3s 2s infinite alternate linear;代码详见github;
入场动画结束跳转
使用index.js里面的fnLoad()进行页面的跳转判断。注意是图片(首页的轮播图)加载完成bImgLoad&&入场动画加载完成bTime之后，才跳转。
图片加载完一般使用如下代码，定义一个arr数组，如果oImg.onLoad成功之后就算加载完成了。
var arr = [];
for(var i=0;i<arr.length;i++)
{
var oImg=new Image();
oImg.src=arr[i];
oImg.onload=function()
{
}
}开场动画bTime
oTimer=setInterval(function(){
if(new Date().getTime()-iTime>=5000)//5000为动画渲染时间，以及welcome页面dom结构完毕时间(可以忽略)
{
bTime=true;
}
if(bImgLoad&&bTime)
{
clearInterval(oTimer);
oW.style.opacity=0;
}
},1000);另外还要绑定transitionend事件（兼容还需写一个webkitTransitionEnd事件）
bind(oW,"webkitTransitionEnd",end);
bind(oW,"transitionend",end);。表示动画加载完成之后的事件。这里要将pageShow类去除(将底层页面显示出来，虽然可以看得见了[opacity:0],但是底下的东西无法点击。)
代码详见github;
移动端滑屏幻灯片切换布局
幻灯片的处理
幻灯片总的有5张图片。所以使用
#picList {overflow: hidden;width: 500%;}然后每个li平分这些区域
#picList li {float: left;width: 20%;}
#picList img{width: 100%;height: 342px;}代码详见github;
移动端滑屏幻灯片切换JS实现
代码为index.js里面的fnTab函数【滑屏函数】
滑屏函数
自动切换函数
初步的切换实现，没有动画效果，自动播放效果。
// 滑屏函数，主要通过修改元素的translateX来实现幻灯片效果。
function fnTab()
{
var oTab = id("tabPic");
var oList = id("picList");
var aNav = oTab.getElementsByTagName('nav')[0].children;
var iNow = 0;//当前选中元素。
var iX = 0;//记录translateX
var iW = view().w;
var oTimer = 0;
oTimer = setInterval(function () {
iNow++;
tab();//
},2000);
//切换函数
function tab() {
iX = -iNow*iW;//向左滑动，所以为负数.
oList.style.WebkitTransform =oList.style.transform= "translateX("+iX+"px)";
}
}详细见 github;
注意过界处理。
oTimer = setInterval(function () {
iNow++;
iNow = iNow%aNav.length;//过界处理
tab();//
},2000);以及nav处理。详细见github;
拖拽函数
touchStart事件,touchMove,touchEnd 事件。
注意要去除document的默认touchMove事件。
bind(document,"touchmove",function(ev){
ev.preventDefault();
})touch事件相关看代码解释。
bind(oTab,"touchstart",fnStart);
bind(oTab,"touchmove",fnMove);
bind(oTab,"touchend",fnEnd);
function fnStart(ev) {
oList.style.transition = "none";//去除transition处理。防止卡顿.
ev = ev.changedTouches[0];//手指按下，手指的列表。
iStartTouchX = ev.pageX;//记录手指位置，
iStartX = iX;//记录
clearInterval(oTimer);//滑屏触摸的时候先清除interval函数
}
function fnMove(ev) {
ev = ev.changedTouches[0];
var iDis = ev.pageX - iStartTouchX;//计算差值。就是手指移动的距离
iX = iStartX +iDis;//计算偏移量。
oList.style.WebkitTransform =oList.style.transform= "translateX("+iX+"px)";
}
function fnEnd(ev) {
// ev = ev.changedTouches[0];
//这个写法第一张有问题。从第一张往左拖动的时候有问题.
/*iNow = Math.abs(iX/iW);//判断走了多远了。
iNow = Math.round(iNow);*/
iNow = iX/iW;
iNow = -Math.round(iNow);
if(iNow<0){
iNow =0;
}
if (iNow>aNav.length-1) {
iNow = aNav.length-1;
}
iNow = iNow%aNav.length;//过界处理
tab();
auto();
}
移动端“评分”组件的布局
注意星星的ps制作。
详细见github;
移动端“评分”组件的实现
鼠标移动到星星a标签上有阴影。
a{-webkit-tap-highlight-color:rgba(255,0,0,0);}这个fnScore实现
每个li下面有一组5个a标签星星，控制index，循环遍历a标签，如果index》a，这个a加入active;
function fnScore()
{
var oScore=id("score");
var aLi=oScore.getElementsByTagName("li");
var arr=["好失望","没有想象的那么差","很一般","良好","棒极了"];
for(var i=0;i<aLi.length;i++)
{
fn(aLi[i]);
}
function fn(oLi)
{
var aNav=oLi.getElementsByTagName("a");
var oInput=oLi.getElementsByTagName("input")[0];
for(var i=0;i<aNav.length;i++)
{
aNav[i].index=i;
bind(aNav[i],"touchstart",function(){
for(var i=0;i<aNav.length;i++)
{
if(i<=this.index)
{
addClass(aNav[i],"active");
}
else
{
removeClass(aNav[i],"active");
}
}
oInput.value=arr[this.index];
});
}
}
fnIndex();
}CSS3单选控件美化
结构
结构主要是使用label来处理的。
<label>
<input type="radio" name="tags" value="服务好" />
<span>服务好</span>
</label>选中的radio的元素的获取
.tags input:checked+span{border: 1px solid #000;}详细代码见github;
移动端超出高度处理、页面跳出设置及模糊设置(上)
提交按钮设置
注意提示信息的时候，移动端没有hover事件，使用active事件处理。
#index:active .info{-webkit-transform:scale(1);opacity: 1;}详细见代码有些代码样式调整跟视频里的不一样了。
首页提交验证fnIndex；
提示信息：这里没有使用transitionEnd事件。这里是动画执行完之后立刻显示。不适合这里的场景，这里只是单纯的显示而已。所以先显示出来，然后再setTimeOut 隐藏掉东西。
function fnInfo(oInfo,sInfo)
{
oInfo.innerHTML=sInfo;
oInfo.style.WebkitTransform="scale(1)";
oInfo.style.opacity=1;
setTimeout(function(){
oInfo.style.WebkitTransform="scale(0)";
oInfo.style.opacity=0;
},1000);
}首页页面跳转
fnIndexOut函数
背景图的制作，ps如何选取三张图绘制到一张图里面。
注意，index首页跳转的时候动画没有起作用，是因为mask从display:none--》display:block;有一个渲染的过程，而渲染的时候transition不起作用。所以这里使用setTimeOut处理。这样渲染完成了。动画效果也就可以l。
function fnIndexOut()
{
var oMask=id("mask");
var oIndex=id("index");
var oNew=id("news");
addClass(oMask,"pageShow");
setTimeout(function(){ //渲染完成。
oMask.style.opacity=1;
},14);
}模糊处理 blur函数
oIndex.style.WebkitFilter=oIndex.style.filter="blur(5px)";注意 这里要加两个setTimeout，就是要处理mask页面隐藏，新闻页面显示的效果
setTimeout(function(){
oMask.style.opacity=1;
oIndex.style.WebkitFilter=oIndex.style.filter="blur(5px)";
},14);
setTimeout(function(){
oNew.style.transition="0.5s";
oMask.style.opacity=0;
oIndex.style.WebkitFilter=oIndex.style.filter="blur(0px)";
oNew.style.opacity=1;
removeClass(oMask,"pageShow");
},3000);代码详见github;
波纹动画制作
解决高度不足问题
高度不够的时候解决办法就是出现滚动条，用一个section.scrollWrap包裹
设置scrollwrap 包裹page页面。
.scrollWrap {position: relative;height: 100%;min-height: 1136px;overflow: hidden;}然后设置.page overflow:auto，让它出现滚动条。
.page {height: 100%;width: 100%;position: absolute;left: 0;top: 0;overflow: auto;background-color: #fff;z-index: 1;display: none;}然后要把上面的默认事件删除掉。
bind(document,"touchmove",function(ev){
ev.preventDefault();
})这段代码要注释掉。
具体代码见github;
新闻线索制作波纹制作
波纹制作有两种方法，第一个使用三个span处理。具体看视频，代码如下；
另一种详细见视频。
上传数据类型验证
结构
注意这个上传文件的结构
<section class="page pageShow" id="news">
<img src="img/news.png" />
<h2>请上传旅游投诉以及突发事件线索</h2>
<section class="file">
<label>
<input type="file" />
<span>导入视频</span>
</label>
<label>
<input type="file" />
<span>上传照片</span>
</label>
</section>
<p class="info"></p>
</section>对应的css
#news h2{ line-height:80px; padding:24px 0 0 34px; font-size:26px;}
.file{background:#fff;height:188px;}
.file label{width:50%;height:100%;float:left; box-sizing:border-box; padding-top:100px; line-height:52px; text-align:center;}
.file label:nth-of-type(1){border-right:1px solid #e5e5e5; background:url(../img/camera1.png) no-repeat center 20px;}
.file label:nth-of-type(2){ background:url(../img/camera2.png) no-repeat center 30px;}
.file input{ display:none;}
js上传事件。
判断文件类型是否正确
this.files[0].type.split("/")[0]=="video"function fnNews()
{
var oNews=id("news");
var oInfo=oNews.getElementsByClassName("info")[0];
var aInput=oNews.getElementsByTagName("input");
aInput[0].onchange=function()
{
if(this.files[0].type.split("/")[0]=="video")
{
fnNewsOut();
this.value="";
}
else
{
fnInfo(oInfo,"请上传视频");
}
};
aInput[1].onchange=function()
{
if(this.files[0].type.split("/")[0]=="image")
{
fnNewsOut();
this.value="";
}
else
{
fnInfo(oInfo,"请上传图片");
}
};
}new页面退出，fnNewsOut.
移动端表单页面制作
详细见代码；
待续
整个项目业务流程设置
待续
扫一扫
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
