妙味課堂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.