妙味课堂仿cctv项目javascript
这里根据psd,宽度为640,因此使用了下面的metacss
<meta name="viewport" content="width=640,user-scalable=no" />
这样设置以后,即便模拟器在苹果4(320*480)下,使用px来css也能够根据缩放比适当缩放。html
这是一个单页项目。全部的页面都在一个html里面展现,每一个页面都使用section单独展现。java
<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控制。css3
每个section的层级关系z-index不同git
.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控制。github
<script type="text/javascript"> window.onload = function () { document.body.style.height = view().h+"px"; } </script>
代码详见github;web
由于设置了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;
代码为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(); }
结构主要是使用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.
详细见代码;
待续
整个项目业务流程设置
待续