妙味课堂cctv移动端项目

时间 2019-11-13

标签课堂移动项目栏目无线繁體版

原文原文链接

项目介绍

妙味课堂仿cctv项目javascript

移动端准备工做

viewport

这里根据psd，宽度为640，因此使用了下面的metacss

<meta name="viewport" content="width=640,user-scalable=no" />

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

section

这是一个单页项目。全部的页面都在一个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;

fill-mode说明

代码详见github;

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

注意云彩动画的时候

animation:cloud 3s 2s infinite alternate linear;

alternate用法

代码详见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.

移动端表单页面制做

详细见代码；

待续

整个项目业务流程设置

待续