妙味课堂cctv移动端项目

阅读量：6676 次

发布时间：2019-06-25

本文共 7199 字，大约阅读时间需要 23 分钟。

项目介绍

妙味课堂仿cctv项目

移动端准备工作

viewport

这里根据psd，宽度为640，所以使用了下面的meta

这样设置之后，即使模拟器在苹果4(320*480)下，使用px来css也可以根据缩放比适当缩放。

section

这是一个单页项目。所有的页面都在一个html里面展示，每个页面都使用section单独展示。

每个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控制。

代码详见;

移动端“入场页面”布局

因为设置了viewport，所以可以使用px进行布局（不同分辨率屏幕会根据缩放比缩放）。

这里主要是一些静态页面布局。

代码详见;

移动端“入场页面”动画制作

入场动画，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;

说明

代码详见;

shake 抖动以及云彩飘请看代码，注意这里有变换起点。

注意云彩动画的时候

animation:cloud 3s 2s infinite alternate linear;

用法

代码详见;

入场动画结束跳转

使用index.js里面的fnLoad()进行页面的跳转判断。注意是图片(首页的轮播图)加载完成bImgLoad&&入场动画加载完成bTime之后，才跳转。

图片加载完一般使用如下代码，定义一个arr数组，如果oImg.onLoad成功之后就算加载完成了。

var arr = [];for(var i=0;i

开场动画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],但是底下的东西无法点击。)

代码详见;

移动端滑屏幻灯片切换布局

幻灯片的处理

幻灯片总的有5张图片。所以使用

#picList {overflow: hidden;width: 500%;}

然后每个li平分这些区域

#picList li {float: left;width: 20%;}#picList img{width: 100%;height: 342px;}

代码详见;

移动端滑屏幻灯片切换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)";	}}

详细见 ;

注意过界处理。

oTimer = setInterval(function () {		iNow++;		iNow = iNow%aNav.length;//过界处理		tab();// 	},2000);

以及nav处理。详细见;

拖拽函数

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制作。

详细见;

移动端“评分”组件的实现

鼠标移动到星星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

CSS3单选控件美化

结构

结构主要是使用label来处理的。

                                服务好

选中的radio的元素的获取

.tags input:checked+span{border: 1px solid #000;}

详细代码见;

移动端超出高度处理、页面跳出设置及模糊设置(上)

提交按钮设置

注意提示信息的时候，移动端没有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);	}

模糊处理函数

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);

代码详见;

波纹动画制作

解决高度不足问题

高度不够的时候解决办法就是出现滚动条，用一个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();})

这段代码要注释掉。

具体代码见;

新闻线索制作波纹制作

波纹制作有两种方法，第一个使用三个span处理。具体看视频，如下；

另一种详细见视频。

上传数据类型验证

结构

注意这个上传文件的结构


    		
     	    
     请上传旅游投诉以及突发事件线索
	    
     	    	
      	        		            导入视频	        	        
      	        		            上传照片

对应的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.