LOL狗年官網刷一波

今年過年的時候和小夥伴們看到了LOL的狗年活動官網。不得不感嘆，搞IT的看的和別人就是不同，別人看活動，我看設計、看特效,看完頭腦一熱，決定用原生js搞一波。。。。

抽了七、8天的空閒時間，搞的差很少了，在谷歌下顯示的仍是能夠的，其餘瀏覽器的兼容性並無測試。

寫完以後收穫了不少，對於css屬性以及css3動畫的進一步學習以及應用，對原生js的練習、運用，增強了對於html標籤語義化的應用，避免過去對於div的魔性依賴。。。還有就是對於html佈局的新理解，本身寫的佈局到最後老是感受沒有原版寫的好（難道是由於我沒有設計的緣由？？？），最後不得不感嘆有一個好的視覺設計師（美工）對於程序員是多麼滴重要

以前github地址放錯了。。。現已改正。以爲喜歡的能夠給個starO(∩_∩)O

git源碼地址

仿寫地址

官網地址

注：

• 目前只對谷歌瀏覽器作了測試，而且沒有手機端界面，因此建議用pc端的chrom瀏覽
• 鑑於本身的服務器網速實在是比不起騰訊爸爸的，因此減小了不少資源（音頻，明星與你同樂模塊的三個視頻）,首次加載由於服務器網速的緣由，資源等待的時間要久一點
• 純粹我的興趣

一些知識點的總結

1.使用瀏覽器的navigator對象判斷當前是不是在手機端和微信端

function is_pc(){
	var os = new Array("Android","iPhone","Windows Phone","iPod","BlackBerry","MeeGo","SymbianOS");  
	var info = navigator.userAgent;
	var len = os.length;
	for (var i = 0; i < len; i++) {
	    if (info.indexOf(os[i]) > 0){
	        return false;
	    }
	}
	return true;
}
function isWeixin(){
	var ua = navigator.userAgent.toLowerCase();
	if(ua.match(/MicroMessenger/i) == 'micromessenger'){
		return true; 
	}else{
	   return false;
	}
}
複製代碼

2.減小if for在編程中的使用

1.三元運算符
	2.if分支多的話改用switch
	3.使用短路判斷 &&、||
	if(XXX){
		 test()
	}
	// 改動後
	XXX && test() 表示若是XXX爲真，返回test，不然返回XXX
	
	if(!XXX){
		test()
	}
	// 改動後
	XXX ||  test()表示若是XXX爲假，返回test，不然返回XXX
	
複製代碼

3.使用background作顏色漸變字體

1.首先使用color設置hack，對於這些新的API，除了敬業的chrom，其餘瀏覽器的支持性還不是很好。
    2.使用background-image顏色漸變linear-gradient來設置漸變屬性
    3.使用text-fill-color:transparent;來設置文字的填充顏色爲透明，當這個屬性聲明時，color將失效
    4.最後使用background-clip:text；聲明只顯示文字區域，就出現漸變色顏色的文字啦
    color: #ef8247;
	 font-size:14px;
	 background-image: linear-gradient(to right,#fee3b5,#f8bb87);
     background-clip: text;
	 -webkit-background-clip: text;
	 -webkit-text-fill-color: transparent;
	 te
	 
	 xt-fill-color:transparent;
複製代碼

4.始終讓元素保持居中或者垂直居中（在知道元素大小的狀況下）

1.首先使用position:absolute絕對定位。
    2.使用margin-left: -50%的寬度,margin-top:-50%的高度
    3.再使用left:50%的寬度,top:50%的高度便可實現界面縮小放大時元素始終垂直居中
    .bg1 .video{
	  position: absolute;
	  width: 1920px;
	  height:900px;
	  margin-left:-960px;
	  left:50%;
	}
複製代碼

5.按鈕閃效果實現

1.首先畫好按鈕。
    2.使用before僞元素繪製透明菱形的滑動方塊，閃的效果就是來自菱形的移動
    3.使用動畫讓菱形僞元素移動起來便可
    .first-page .bottom-btn span{
	  display: block;
	  height:40px;
	  line-height:40px;
	  overflow: hidden;
	  margin:0 9px 0 7px;
	  position: relative;
	}
	
	.first-page .bottom-btn  span:before{
	  content: ' ';
	  position: absolute;
	  width:80px;
	  height:350px;
	  top:0;
	  left:-150px;
	  transform: skew(-25deg);
	  background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
	}
	@keyframes leftToRight {
	  0%{left:-150px;}
	  100%{left:250px}
	}
複製代碼

6.transform屬性

transform:rotate3d(x,y,z,d)
    這個比較好理解，3d旋轉，4個參數，分別對應x,y,z軸，類型是number，最後一個參數是旋轉的角度，最後旋轉的角度爲x*d,y*d,z*d,因此前面三個參數爲1時就正常旋轉角度，0時不旋轉
    
    transform:perspective
    
    1. perspective屬性設置鏡頭到元素平面的距離。全部元素都是放置在z=0的平面上。好比perspective(300px)表示，鏡頭距離元素表面的位置是300像素。
    2. perspective-origin屬性規定了鏡頭在平面上的位置。默認是放在元素的中心。
    
複製代碼

7.好看的hover效果

1.正常些元素屬性
	2.在元素hover的時候，使用before僞元素，給before僞元素添加動畫，使用opacity和scale進行實現
	
	@keyframes coruscate {
	  0%{
	    opacity:.3;
	    transform: scale(1);
	  }
	  100%{
	    opacity:0;
	    transform: scale(1.2);
	    display: none;
	  }
	}
	
	.as-you-play .card-list  .card-3{
	  position: absolute;
	  background: url("../assets/spr_redpackage.png")no-repeat -340px -478px;
	  width:392px;
	  height:333px;
	  top:-38px;
	  left:800px;
	}

	 .as-you-play .card-list  .card-3:hover:before{
      content: '';
      position: absolute;
      background: url("./assets/spr_redpackage.png")no-repeat -340px -478px;
      width:392px;
      height:333px;
      top:0px;
      left:0px;
      animation:coruscate .4s ease-in-out;
    }
	
	
複製代碼

8.上下移動效果的思路以及優化

一開始直接使用的onscroll函數對滾動事件進行監聽

方法體中的每一個方法都對應頁面中每個模塊的出現與消失的控制

後來發現這個方法問題比較大，每一次都是調用全部方法是一方面，另外一方面，只要在高度以外，每次一次滾動都會removeActive，雖然界面上看沒有什麼變化，可是運算量一下就上來了，致使界面會有些卡頓感受

通過一番思考，改爲滾動到必定區域的高度時，在調用對應的方法

感受應該還有不小的優化空間，後面繼續優化這一塊

9.第一頁上下滾動效果的優化

在官網中，第一頁到第二頁之間觸發滾動的時候會自動下滾或者上滾，本覺得這一塊會比較簡單，沒想到這裏纔是最費時間的地方，由於沒有用JQ，因此不少方法都要本身實現

• 上下自動滾動的動畫已經對body和nav進行樣式設置

* 首先將要滾動的高度除以每次滾動的高度，得出次數
* 使用setInterval定時器每次滾動對應高度，知道循環到指定次數，清除這個定時器
* 在滾動時吧body的padding-top設置爲142px,nav的定位方式改成fixed

```javascript
  function scrollTo945(){
	  disabledMouseWheel();
	  setTimeout(mouseWheel,500);
	  document.getElementsByClassName('activity-nav')[0].style.position = 'fixed'
	
	  setTimeout(function(){
	    document.body.style.paddingTop = '142px';
	  },50)
	    var scrollTemp =  getScrollTop();
	    var scrollHeight = scrollDownHeigh - scrollTemp;
	    var len = Math.floor(scrollHeight/step),i=0;
	    var first_length = scrollHeight % step
	    clearInterval(timer)
	    timer = setInterval(function(){
	      if(i>len) return;
	      i==0 ?  window.scrollTo(0,first_length) : window.scrollTo(0,i*step+first_length);
	      i === len && clearTimerDown()
	      i++;
	    },10)
	
	}
```
複製代碼

• 注意點

*  一開始選用的onscroll方法進行監聽，後來發現這個方法和全局控制各個模塊的方法相沖突，會引起比較多的BUG，全部後來換用了onmousewheel方法對滾動進行監聽
*  每次觸發滾動事件時，須要把onmousewheel事件解綁，不然用戶再次觸發該事件時，會發生BUG
*  對於body的padding-top的動畫時間設置和頁面滾動的動畫時間設置須要反覆的嘗試，找到一個比較平衡的點，這樣滾動的時候不會有太大的感受
複製代碼