01JavaScript動畫DOM——js輪播圖、動畫、tween庫、swipe庫、offsetTop/Left/Width/Height、clientWidth/clientHeight

JS動畫

本質上就是通過JS的方式讓元素的屬性發生連續變化的過程

JS動畫核心：
    1、獲取元素屬性，改變後重新賦值
    2、改變過程是連續的->setInterval()
   注：通過element.style.attr只能獲取行間樣式的值，並且得到的是一個字符串，通過層疊樣式表設置的樣式，用這樣的方法只能得到"" 即空字符串。通過JS爲元素設置樣式，只有唯一的一種方式，就是element.style.attr="樣式的值"

// 點擊頁面上的div,可以使它5s勻速向右移動300px
var timer=null;
wrap.onclick=function(){
    if(timer==null){
	    timer=setInterval(function(){
		    // 1、獲取元素當前的位置
		    var l=wrap.offsetLeft;
		    // 2、增加l的值
		    l+=1;
		    if(l>=300){
				l=300;
				clearInterval(timer);
				timer=null;
			}
			// 3、爲元素賦值
			wrap.style.left=l+"px";
		},20)
	}
}

offsetTop  offsetLeft  offsetWidth  offsetHeigth  clientWidth/clientHeight

offsetTop/offsetLeft 獲取元素的偏移量，得到的是一個number，獲取元素相對於定位父級的偏移量，得到的是一個number

offset屬性是隻讀屬性，只能獲取值，不能賦值

offsetWidth/offsetHeight  獲取元素的寬度，得到的是一個number；寬度包含：border+padding+width(內容寬度)

clientWidth/clientHeight 獲取的是元素的寬度，是一個number，寬的：padding+width(內容寬度)

getComputedStyle()

getComputedStyle():需要一個參數，需要獲取樣式的元素，得到是這個元素的所有的樣式的一個對象

var n=getComputedStyle(wrap)
console.log(n.width)

通過 '.' 點語法來獲得對應的樣式屬性值，值是一個字符串，並且帶單位,，例如：wrap.style.left—>50px

在IE上獲取元素計算後的樣式的方法：currentStyle()    

使用方法:

var m=wrap.currentStyle();
console.log(m.backgroundColor);

將字符串轉爲可執行的代碼的方法（只能用在.語法上）：

//wrap.style["width"]->wrap.style.width
wrap.style["width"]="500px"

JS版輪播圖/無縫輪播

setInterval(function(){
	// 讓box向左移動，每次500px
	var l=box.offsetLeft;
	l-=500;
	if(l<-1000){
		l=0;
	}
	box.style.left=l+"px"
},2000)

//JS無縫輪播圖
setInterval(function(){
	// 讓box向左移動，每次500px
	var l=box.offsetLeft;
	l-=1;
	if(l<-1500){
		l=0;
	}
	box.style.left=l+"px"
},1)

var slides=document.querySelectorAll(".slide");
	// tween版本輪播圖
	// 獲取每一次圖片切換box需要向左移動的距離
	var w=slides[0].offsetWidth;
	var t=0,b=0,c=-w,d=50;
	// 每隔2s讓圖片進行一次輪播
	setInterval(function(){
		outoImg()
	},2000)

	function outoImg(){
		var timer=setInterval(function(){
			// t改變
			t++;
			// 爲元素設置left屬性
			box.style.left=Tween.Linear(t,b,c,d)+"px";
			if(t>=d){
				// 每次動畫結束，重置t的值用作下次動畫
				t=0;
				// 將上次的動畫結束位置，作爲下次動畫開始位置
				b+=c;
				// 當第三張圖顯示完後，需要從第一張重新顯示
				if(b<=3*c){
					b=0;
				}
				// c*=2;
				// if(){}
				clearInterval(timer);
			}
		},30)	
	}

tween.js

tween.js是一個寫好的JS動畫庫，提供了比較豐富的動畫緩動效果，使用需要配合setInreval()，並傳入幾個參數就可以實現動畫效果需要引入tween.js庫

參數情況：需要四個參數，都是必須參數，分別稱爲：t b c d。這裏說的t b c d都是形式參數,並不一定命名爲此，只要搞明白每個參數代表的意義，按照順序傳入參數就行了

        參數的意義：t 代表着開始時間，通常賦值爲0，t 的值在計時器中需要不斷髮生改變，並且改變的趨勢必須逐漸接近並超過d的值，與d共同決定了動畫需要多少個步驟來完成
        b：動畫開始時元素的位置與元素原本所在的位置無關，
        c：表示改變量，就是元素從動畫開始到動畫結束中間的差值
        d：表示動畫持續時間，沒有單位，與t共同決定動畫需要多少步完成，整個動畫真正的持續時間
        還要根據，計時器的時間間隔決定

// 讓div從現在的位置，動畫過程移動到距離頁面邊緣500px的位置
	// 準備四個參數
	var t=0,b=200,c=300,d=100;
	// 開啓計時器
	var timer=setInterval(function(){
		// 勻速運動沒有其他緩動效果
		// c*t/d + b;
		// wrap.style.left=Tween.Linear(t,b,c,d)+"px";
		// c*(t/=d)*t*((s+1)*t - s) + b;s=1.70158
		// wrap.style.left=Tween.Back.easeIn(t,b,c,d)+"px";
		// wrap.style.left=Tween.Back.easeInOut(t,b,c,d)+"px";
		// wrap.style.left=Tween.Bounce.easeInOut(t,b,c,d)+"px"
		// wrap.style.transform="rotate("+Tween.Bounce.easeInOut(t,b,c,d)+"deg)"
		wrap.style.transform="rotate("+Tween.Linear(t,b,c,d)+"deg)"
		t++;
		// 當t的值與d相同時，經過tween所規定的的計算式，會得到最終動畫結束的位置需要的值
		// 因此在此時關閉計時器，結束動畫
		// if(t>=d){
		// 	clearInterval(timer)
		// }
	},30)

swiper.js

初始化swiper實例
   需要兩個參數：第一個是輪播圖外框的選擇器字符串
   第二個參數是一個對象，是對輪播圖功能的設置

<!-- 輪播圖外框 -->
	<div class="swiper-container">
		<!-- 輪播的圖片容器 -->
		<div class="swiper-wrapper">
			<!-- 輪播的圖片 -->
			<div class="swiper-slide">slider1</div>
			<div class="swiper-slide">slider2</div>
			<div class="swiper-slide">slider3</div>
			<div class="swiper-slide">slider4</div>
			<div class="swiper-slide">slider5</div>
			<div class="swiper-slide">slider6</div>

		</div>
		<!-- 上一頁下一頁按鈕 -->
		<div class="swiper-button-prev"></div><!--左箭頭-->
    	<div class="swiper-button-next"></div><!--右箭頭-->
    	<!-- 分頁器 -->
    	<div class="swiper-pagination"></div><!--分頁器-->
	</div>

<style>
		.swiper-container{
			width: 500px;
			height: 300px;
			border: 5px solid;
		}
		.swiper-slide{
			font-size: 100px;
			line-height: 300px;
			text-align: center;
		}
	</style>


script代碼：
var mySwiper=new Swiper(".swiper-container",{
		autoplay: true,
		// 設置上一頁下一頁按鈕
		navigation: {
		    nextEl: '.swiper-button-next',
		    prevEl: '.swiper-button-prev',
	  	},
	  	// 設置分頁器
	  	pagination: {
	    	el: '.swiper-pagination',
	  	},
	  	// 設置切換樣式爲方塊
	  	effect : 'flip',
	})