首頁>技術>

1.實現效果圖

carousel-3D-perspective

3D輪播圖,景深效果perspective,保持preserve-3d

輪播圖

infinity無限動畫迴圈,入場-出場動畫移動translate

移動opacity

offset應用,照片4等分移動縮放

圖片炸裂

canvas應用:彩色冒泡效果,opacity應用:覆蓋顯隱效果,文字飛入飛出

滑鼠移動氣泡出入場

1. 主js動畫
$(function() {	var navIndicator = document.querySelector("#wrap > #head > .head-main > .nav-arrow");	var navLis = document.querySelectorAll("#wrap > #head > .head-main > .nav-content > .nav-content-ul > li");	var firstNavLi = navLis[0];	var navLiFirstHover = firstNavLi.querySelector(".hover-nav");	//查詢同級下標籤,不使用>	var navLiAllHover = document.querySelectorAll("#wrap > #head > .head-main > .nav-content > .nav-content-ul > li .hover-nav");	//獲取main-head	var head = document.querySelector("#wrap > #head");	//獲取內容區	var content = document.querySelector("#wrap > #content");	var contentLis = document.querySelectorAll("#wrap > #content >.content-ul > li")	var contentUL = document.querySelector("#wrap > #content >.content-ul");	//滾輪--》每次獲取視口,需要index每次改變i,且計入切屏動畫	var indexDef = 0;	//滾輪延時	var scrollDelay = 0;	//|-3.輪播圖互動,如果兩個元素之間存在如section沒有指定,則不用> ,空格代替	var carouselIconLi = document.querySelectorAll("#wrap > #content >.content-ul >.home .carousel-icon > li");	var carouselDotLi = document.querySelectorAll("#wrap > #content >.content-ul >.home .carousel-dot > li");	//再次開啟自動輪播,滑鼠覆蓋	var homeIcon = document.querySelector("#wrap > #content >.content-ul >.home .carousel-icon");	//dot-li上一次點選index	var dotPreviesIndex = 0;	//自動輪播定時器	var autoCarouselInterval = 0;	var intervalIndex = 0;	//圖片分割炸裂效果,如果中間有間隔的元素未申明(如section),則兩個元素之前用空格,不用>連線	var canvasUL = document.querySelectorAll("#wrap > #content > .content-ul > .about .about-canvas > .item > ul");	//頁面原點互動	var contentULDot = document.querySelectorAll("#wrap > #content > .content-ul-dot > li");	//氣泡節點	var memberULli = document.querySelectorAll("#wrap > #content > .content-ul > .team .team-member > .member-ul > li");	//結束覆蓋,獲取整個ul	var memberUL = document.querySelector("#wrap > #content > .content-ul > .team .team-member > .member-ul");	//畫布位置	var teamMember = document.querySelector("#wrap > #content > .content-ul > .team .team-member");	console.log("這裡是member-li:", memberULli);		//切屏變數:上一屏,需要滑鼠滾輪,點選nav導航navLis[i],點選dot按鈕contentULDot[i]	previousIndex=0;		//音訊	var navAudio=document.querySelector("#wrap > #head > .head-main > .nav-audio");	var audios=document.querySelector("#wrap > #head > .head-main > .nav-audio > audio");	//變數提升,變數必須寫在函式執行之前	//1.頭部互動	headBinder();	function headBinder() {		console.log("第一個li標籤的left:", firstNavLi.offsetLeft);		//箭頭left:li的left+li的自身width/2-箭頭的width/2		navIndicator.style.left = firstNavLi.offsetLeft + firstNavLi.offsetWidth / 2 - navIndicator.offsetWidth / 2 + "px";		//預設home黑色		navLiFirstHover.style.width = "100%";		/*		 * 1.迴圈繫結li事件		 */		console.log(navLiAllHover);		for(var i = 0; i < navLis.length; i++) {			//繫結節點屬性index計入下標,跨過非同步			navLis[i].index = i;			console.log("點選li: ", navLis[i].index);			navLis[i].onclick = function() {				//賦值操作之前,計入上一屏				previousIndex=indexDef;				//傳入nav-li-node引數				indicatorNav(this.index);				indexDef = this.index;			}		}		//7.頁面圓點跳轉:繫結工具類箭頭移動--indicatorNav(index);		for(var i = 0; i < contentULDot.length; i++) {			//繫結節點屬性index計入下標,跨過非同步			contentULDot[i].index = i;			contentULDot[i].onclick = function() {				//賦值操作之前,計入上一屏				previousIndex=indexDef;				//傳入nav-li-node引數,修改className引數				indicatorNav(this.index);				indexDef = this.index;			}		}	}	//2.內容區互動,每次縮放頁面,需要再次獲取視口	window.onresize = function() {		contentBinder();		contentUL.style.top = -indexDef * (document.documentElement.clientHeight - head.offsetHeight) + "px";		//移動箭頭		navIndicator.style.left = navLis[indexDef].offsetLeft + navLis[indexDef].offsetWidth / 2 - navIndicator.offsetWidth / 2 + "px";	}	//2.1切屏	contentBinder();	function contentBinder() {		//內容區高度=視口高度-head高度		content.style.height = document.documentElement.clientHeight - head.offsetHeight + "px";		for(var i = 0; i < contentLis.length; i++) {			contentLis[i].style.height = document.documentElement.clientHeight - head.offsetHeight + "px";		}	}	//2.2滾輪	/*	 *  * 滾輪事件                  捕獲事件:前提是有巢狀的dom結構,子元素存在父級                  目標處理事件:div無巢狀處理                   冒泡事件:前提是有巢狀的dom結構          ie/chrome : onmousewheel(dom0)          			event.wheelDelta          				上:120          				下:-120			          firefox : DOMMouseScroll 必須用(dom2的標準模式)          			event.detail          				上:-3          				下:3	 */	if(content.addEventListener) {		content.addEventListener("DOMMouseScroll", function(e) {			e = e || event;			//每次滾動清空delay時間			clearTimeout(scrollDelay);			//避免滾輪滑動多次滑屏,設定延時,超過時間則清空事件e			scrollDelay = setTimeout(function() {				scrollContent(e);			}, 200)		});	}	//2.3監聽後執行滾動	content.onmousewheel = function(e) {		e = e || event;		//每次滾動清空delay時間		clearTimeout(scrollDelay);		//避免滾輪滑動多次滑屏,設定延時		scrollDelay = setTimeout(function() {			scrollContent(e);		}, 200)	};	//3.carousel輪播圖	contentHome3DCarousel();	function contentHome3DCarousel() {		//i和j存在兩個作用域,可同名		for(var i = 0; i < carouselDotLi.length; i++) {			//存取當前[i]			carouselDotLi[i].index = i;			carouselDotLi[i].onclick = function() {				//點選時,清除自動輪播定時器carouselAUTO下的				clearInterval(autoCarouselInterval);				for(var j = 0; j < carouselDotLi.length; j++) {					//自帶removeClass					//carouselDotLi[j].classList.remove("active");					//工具類,這裡使用this,不會將,其他的li移除active					removeClass(carouselDotLi[j], "active");				}				//this.classList.add("active");				addClass(this, "active");				/*輪播圖繫結*4個屬性					1.carouselLeftOut左消失:開始向左偏移:左消失,右出現					  |- visibility: hidden;					  |- animation: 1s carouselLeftHide 1 linear;					2.carouselRightIn右出現					  |- visibility: visible;					  |- animation: 1s carouselRightShow 1 linear;					3.carouselLeftIn左出現:開始向右偏移:左出現,右消失					  |- visibility: visible;					  |- animation: 1s carouselLeftShow 1 linear;					4.carouselRightOut右消失					  |- visibility: hidden;					  |- animation: 1s carouselRightHide 1 linear;				 */				//從左向右點選=index[j]>index[j-1],rightShow				if(this.index > dotPreviesIndex) {					/*//清除當前index:其他樣式					carouselIconLi[this.index].classList.remove("carouselLeftOut");					carouselIconLi[this.index].classList.remove("carouselLeftIn");					carouselIconLi[this.index].classList.remove("carouselRightOut");					carouselIconLi[this.index].classList.add("carouselRightIn");					//清除上一個index:其他樣式					carouselIconLi[dotPreviesIndex].classList.remove("carouselRightIn");					carouselIconLi[dotPreviesIndex].classList.remove("carouselLeftIn");					carouselIconLi[dotPreviesIndex].classList.remove("carouselRightOut");					carouselIconLi[dotPreviesIndex].classList.add("carouselLeftOut");*/					//工具類刪除					removeClass(carouselIconLi[this.index], "carouselLeftOut");					removeClass(carouselIconLi[this.index], "carouselLeftIn");					removeClass(carouselIconLi[this.index], "carouselRightOut");					addClass(carouselIconLi[this.index], "carouselRightIn");					removeClass(carouselIconLi[dotPreviesIndex], "carouselRightIn");					removeClass(carouselIconLi[dotPreviesIndex], "carouselLeftIn");					removeClass(carouselIconLi[dotPreviesIndex], "carouselRightOut");					addClass(carouselIconLi[dotPreviesIndex], "carouselLeftOut");				}				//從右向左點選=index[j]<index[j+1],leftShow				if(this.index < dotPreviesIndex) {					/*//清除當前index:其他樣式,取反					carouselIconLi[this.index].classList.remove("carouselLeftOut");					carouselIconLi[this.index].classList.remove("carouselRightOut");					carouselIconLi[this.index].classList.remove("carouselLeftIn");					carouselIconLi[this.index].classList.add("carouselRightIn");					//清除上一個index:其他樣式,取反					carouselIconLi[dotPreviesIndex].classList.remove("carouselLeftIn");					carouselIconLi[dotPreviesIndex].classList.remove("carouselRightIn");					carouselIconLi[dotPreviesIndex].classList.remove("carouselRightOut");					carouselIconLi[dotPreviesIndex].classList.add("carouselLeftOut");*/					//工具類新增					removeClass(carouselIconLi[this.index], "carouselLeftOut");					removeClass(carouselIconLi[this.index], "carouselRightOut");					removeClass(carouselIconLi[this.index], "carouselLeftIn");					addClass(carouselIconLi[this.index], "carouselRightIn");					removeClass(carouselIconLi[dotPreviesIndex], "carouselLeftIn");					removeClass(carouselIconLi[dotPreviesIndex], "carouselRightIn");					removeClass(carouselIconLi[dotPreviesIndex], "carouselRightOut");					addClass(carouselIconLi[dotPreviesIndex], "carouselLeftOut");				}				//每次點選之後傳入				dotPreviesIndex = this.index;				//手動輪播--》傳遞而自動輪播index				intervalIndex = this.index;				//點選後,重新開啟自動輪播				carouselAUTO();			}		}	}	//4.自動輪播:從左向右	carouselAUTO();	function carouselAUTO() {		//進入後避免觸發2次interval		clearInterval(autoCarouselInterval);		autoCarouselInterval = setInterval(function() {			//intervalIndex索引小標為下一次輪播的previousIndex			intervalIndex++;			//無縫輪播:=5返回1			if(intervalIndex == carouselIconLi.length) {				intervalIndex = 0;			}			//原點同步			for(var j = 0; j < carouselDotLi.length; j++) {				//自帶removeClass				//carouselDotLi[j].classList.remove("active");				//工具類,這裡使用this,不會將,其他的li移除active				removeClass(carouselDotLi[j], "active");			}			addClass(carouselDotLi[intervalIndex], "active");			removeClass(carouselIconLi[intervalIndex], "carouselLeftOut");			removeClass(carouselIconLi[intervalIndex], "carouselLeftIn");			removeClass(carouselIconLi[intervalIndex], "carouselRightOut");			addClass(carouselIconLi[intervalIndex], "carouselRightIn");			removeClass(carouselIconLi[dotPreviesIndex], "carouselRightIn");			removeClass(carouselIconLi[dotPreviesIndex], "carouselLeftIn");			removeClass(carouselIconLi[dotPreviesIndex], "carouselRightOut");			addClass(carouselIconLi[dotPreviesIndex], "carouselLeftOut");			//自動輪播--->手動輪播同步,必須設定previous值			dotPreviesIndex = intervalIndex;		}, 3000);	}	//5.滑鼠覆蓋輪播	homeIconHover();	function homeIconHover() {		//滑鼠進入		homeIcon.onmouseenter = function() {			clearInterval(autoCarouselInterval);		};		//滑鼠移出		homeIcon.onmouseleave = function() {			carouselAUTO();		}	}	//6.圖片4等分	canvasULImageBoom();	function canvasULImageBoom() {		for(var i = 0; i < canvasUL.length; i++) {			//圖片分割炸裂函式			boomCanvas(canvasUL[i]);		}	}	//8.第五屏:氣泡效果	canvasBubble();	function canvasBubble() {		//判斷是否存在氣泡		var bubbleFlag = null;		//時間定時器		var bubbleGenerate = 0;		var bubbleMove = 0;		for(var i = 0; i < memberULli.length; i++) {			//繫結事件為非同步程式碼,需要index,或者在點選事件內部進行再次遍歷			memberULli[i].onmouseenter = function() {				for(var j = 0; j < memberULli.length; j++) {					memberULli[j].style.opacity = .5;				}				this.style.opacity = 1;				//氣泡動畫				bubbles();				bubbleFlag.style.left = this.offsetLeft + "px";			}		}		//7.氣泡動畫		function bubbles() {			if(!bubbleFlag) {				bubbleFlag = document.createElement("canvas");				bubbleFlag.width = memberULli[0].offsetWidth;				bubbleFlag.height = memberULli[0].offsetHeight * 2 / 3;				//滑鼠離開,離開畫布div				teamMember.onmouseleave = function() {					for(var j = 0; j < memberULli.length; j++) {						memberULli[j].style.opacity = 1;					}					removeBubbleFlag();				}				//插入畫布				teamMember.appendChild(bubbleFlag);				bubblesModule();			}		}		/*memberUL.onmouseleave = function() {			for(var j = 0; j < memberULli.length; j++) {				memberULli[j].style.opacity = 1;			}		}*/		//移除canvas		function removeBubbleFlag() {			bubbleFlag.remove();			bubbleFlag = null;			//清除冒泡定時器			clearInterval(bubbleGenerate);			clearInterval(bubbleMove);		}		//6.氣泡元件		function bubblesModule() {			/*var canvasNode = document.querySelector("#wrap-canvas");*/			if(bubbleFlag.getContext) {				var canvasPen = bubbleFlag.getContext("2d");				/***簡易canvas動畫position***/				/*var flag=0;				  setInterval(function(){					//每次進入清理畫布					canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height);					flag++;					canvasPen.save();					canvasPen.strokeStyle="white";					canvasPen.beginPath();					//位置變動					canvasPen.strokeRect(flag,flag,100,100);					canvasPen.restore();					//1s/60次				},1000/60);*/				/*arc(x,y(圓形位置),radius半徑,startAngle開始角度,endAngle結束角度,anticlockwise時間方向-true逆時針|false順時針)					|- arc(x,y,radius,startAngle,endAngle,anticlockwise)					|- canvasPen.arc(150,150,10,0,360*Math.PI/180);				  Math.random -->返回[0-1):包括0,但不包括1					* 開區間(a,b) : a和b之間,不包括a、b					* 閉區間[a,b] : a和b之間,包括a、b					* Math.random()*mosaicSize=[0,5]					* 1個畫素的mosaic:並且需要向下取整Math.floor(Math.random()*mosaicSize)=[0,5)-->[0-4]				 */				//隨機圓位置				var positionArr = [];				//1.繪製圓				bubbleGenerate = setInterval(function() {					//radius最小值=5					var radius = Math.random() * 6 + 2;					var x = Math.random() * bubbleFlag.width;					//var y = Math.random() * bubbleFlag.height;					//取消隨機y軸,					var y = bubbleFlag.height - radius;					//顏色隨機,取整					var r = Math.round(Math.random() * 255);					var g = Math.round(Math.random() * 255);					var b = Math.round(Math.random() * 255);					var a = 1;					//運動曲線,旋轉deg,起始點,影響因子,因子越大,旋轉deg幅度越大					var deg = 0;					var initialX = x;					var initialY = y;					//var effect = 20;					//隨機因子					var effect = Math.random() * 20 + 10;					positionArr.push({						x: x,						y: y,						radius: radius,						r: r,						g: g,						b: b,						a: a,						deg: deg,						initialX: initialX,						initialY: initialY,						effect: effect					});				}, 50);				//2.將陣列中的圓繪製到畫布				bubbleMove = setInterval(function() {					canvasPen.clearRect(0, 0, bubbleFlag.width, bubbleFlag.height);					//每次進入迴圈,半徑變化					//console.log(positionArr);					//1.生成動畫					for(var j = 0; j < positionArr.length; j++) {						//限制max最大值,不限制則成為無限放大迴圈夢幻斑點,可取消判斷						/*if(positionArr[j].radius<=80){							positionArr[j].radius++;						}*/						//透明度<0,不需要繪製畫布,Radius隨機,不需要指定半徑和透明度						/*if(positionArr[j].a<=0){							//去掉第j個元素,去掉1個							positionArr.splice(j,1);						}						positionArr[j].radius++;						positionArr[j].a-=0.01;*/						/*曲線運動,係數增加運動速度*/						positionArr[j].deg += 7;						//更改圓心						/*canvasNode.style.left=initialX+(deg*Math.PI/180)*effect/2+"px";						canvasNode.style.top=initialY+Math.sin(deg*Math.PI/180)*effect*2+"px";*/						//canvas不加ps,順時針自左向右旋轉						/*positionArr[j].x = positionArr[j].initialX + (positionArr[j].deg * Math.PI / 180) * positionArr[j].effect / 2 ;						positionArr[j].y = positionArr[j].initialY + Math.sin(positionArr[j].deg * Math.PI / 180) * positionArr[j].effect * 2;*/						//自下而上旋轉						positionArr[j].x = positionArr[j].initialX + Math.sin(positionArr[j].deg * Math.PI / 180) * positionArr[j].effect * 2;						//曲線運動波長配置:positionArr[j].effect * 2						positionArr[j].y = positionArr[j].initialY - (positionArr[j].deg * Math.PI / 180) * positionArr[j].effect;						//判斷位置大於畫布則刪除,最高top=y						if(positionArr[j].y <= 50) {							positionArr.splice(j, 1);						}					}					//2.生成動畫元資料:繪製隨機陣列的圓					for(var i = 0; i < positionArr.length; i++) {						canvasPen.save();						//隨機色						canvasPen.fillStyle = "rgba(" + positionArr[i].r + "," + positionArr[i].g + "," + positionArr[i].b + "," + positionArr[i].a + ")";						canvasPen.beginPath();						canvasPen.arc(positionArr[i].x, positionArr[i].y, positionArr[i].radius, 0, 2 * Math.PI);						canvasPen.fill();						canvasPen.restore();					}					//每秒60次				}, 1000 / 60);			}		}	}	/**出入場**/	//所有屏的出入場狀態陣列	var outInAnimations = [		//9.1第一屏		{			outAnimation: function() {				//輪播圖carousel在上面,獲取輪播圖ul				var carouselIcon = document.querySelector("#wrap > #content >.content-ul >.home .carousel-icon");				//dot選擇點在下面,獲取dot-ul				var carouselDot = document.querySelector("#wrap > #content >.content-ul >.home .carousel-dot");				carouselIcon.style.transform = "translateY(-500px)";				carouselDot.style.transform = "translateY(150px)";				carouselIcon.style.opacity = 0;				carouselDot.style.opacity = 0;			},			inAnimation: function() {				var carouselIcon = document.querySelector("#wrap > #content >.content-ul >.home .carousel-icon");				var carouselDot = document.querySelector("#wrap > #content >.content-ul >.home .carousel-dot");				carouselIcon.style.transform = "translateY(0px)";				carouselDot.style.transform = "translateY(0px)";				carouselIcon.style.opacity = 1;				carouselDot.style.opacity = 1;			}		},		//9.2第二屏		{			outAnimation: function() {				var plane1 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane1");				var plane2 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane2");				var plane3 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane3");				plane1.style.transform = "translate(-200px, -100px)";				plane2.style.transform = "translate(-300px, 600px)";				plane3.style.transform = "translate(500px, -200px)";				plane1.style.opacity = 0;				plane2.style.opacity = 0;				plane3.style.opacity = 0;			},			inAnimation: function() {				var plane1 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane1");				var plane2 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane2");				var plane3 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane3");				plane1.style.transform = "translate(0px, 0px)";				plane2.style.transform = "translate(0px, 0px)";				plane3.style.transform = "translate(0px, 0px)";				plane1.style.opacity = 1;				plane2.style.opacity = 1;				plane3.style.opacity = 1;			}		},		//9.3第三屏		{			outAnimation: function() {				var pencel1 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-1");				var pencel2 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-2");				var pencel3 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-3");				pencel1.style.transform = "translate(1100px,0px) rotate(360deg)";				pencel2.style.transform = "translate(888px,0px) rotate(270deg)";				pencel3.style.transform = "translate(999px,600px) rotate(180deg)";				pencel1.style.opacity = 0;				pencel2.style.opacity = 0;				pencel3.style.opacity = 0;			},			inAnimation: function() {				var pencel1 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-1");				var pencel2 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-2");				var pencel3 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-3");				pencel1.style.transform = "translate(0px,0px) rotate(0deg)";				pencel2.style.transform = "translate(0px,0px) rotate(0deg)";				pencel3.style.transform = "translate(0px,0px) rotate(0deg)";				pencel1.style.opacity = 1;				pencel2.style.opacity = 1;				pencel3.style.opacity = 1;			}		},		//9.4第四屏		{			outAnimation: function() {				var canvasImg1 = document.querySelector("#wrap > #content > .content-ul > .about .about-canvas > .item:nth-child(1)");				var canvasImg2 = document.querySelector("#wrap > #content > .content-ul > .about .about-canvas > .item:nth-child(2)");				canvasImg1.style.transform = "rotate(50deg)";				canvasImg2.style.transform = "rotate(-50deg)";			},			inAnimation: function() {				var canvasImg1 = document.querySelector("#wrap > #content > .content-ul > .about .about-canvas > .item:nth-child(1)");				var canvasImg2 = document.querySelector("#wrap > #content > .content-ul > .about .about-canvas > .item:nth-child(2)");				canvasImg1.style.transform = "rotate(0deg)";				canvasImg2.style.transform = "rotate(0deg)";			}		},		//9.5第五屏		{			outAnimation: function() {				var teamHeader = document.querySelector("#wrap > #content > .content-ul > .team .team-header");				var teamIntro = document.querySelector("#wrap > #content > .content-ul > .team .team-intro");				teamHeader.style.transform = "translate(-200px,0px)";				teamIntro.style.transform = "translate(1200px,0px)";				teamHeader.style.opacity = 0;				teamIntro.style.opacity = 0;			},			inAnimation: function() {				var teamHeader = document.querySelector("#wrap > #content > .content-ul > .team .team-header");				var teamIntro = document.querySelector("#wrap > #content > .content-ul > .team .team-intro");				teamHeader.style.transform = "translate(0px,0px)";				teamIntro.style.transform = "translate(0px,0px)";				teamHeader.style.opacity = 1;				teamIntro.style.opacity = 1;			}		},	];	//9.模擬出入場	/*outInScreen();	function outInScreen() {		outInAnimations[1].outAnimation();		//延遲		setTimeout(function() {			outInAnimations[1].inAnimation();		}, 2000);	}*/	//9.自動切場動畫	for(var i = 0; i < outInAnimations.length; i++) {		//全部出場,在工具類,indicatorNav中進行動畫入場		outInAnimations[i]["outAnimation"]();	}	//9.模擬出入場-一次性	setTimeout(function() {		outInAnimations[0].inAnimation();		console.log("進來了???");	}, 200);		//10.音訊	audioControl();	function audioControl(){		navAudio.onclick=function(){			if(audios.paused){				audios.play();  				navAudio.style.background="url(img/musicon.gif) no-repeat";			}else{				audios.pause();				navAudio.style.background="url(img/musicoff.gif) no-repeat";			}		}	}	/**工具類**/	//1.nav箭頭移動	//自定義調屏,如果有開機動畫out-in-screen.js的啟用,那麼這裡要做最佳化,在動畫執行完畢後呼叫	indicatorNav(0);	function indicatorNav(index) {		for(var j = 0; j < navLiAllHover.length; j++) {			//navLiAllHover[j].style.width="0";			//這裡設定為0,css中的hover樣式將不再生效,需要設定為空			navLiAllHover[j].style.width = "";		}		//非同步執行,不可使用navLiAllHover[i].style,也不可使用this,this=navLis[i]		navLiAllHover[index].style.width = "100%";		//移動箭頭		navIndicator.style.left = navLis[index].offsetLeft + navLis[index].offsetWidth / 2 - navIndicator.offsetWidth / 2 + "px";		//切換屏-向上,和視口client有關的left位置屬性,需要在頁面resize時重新獲取		contentUL.style.top = -index * (document.documentElement.clientHeight - head.offsetHeight) + "px";		//點選圓點跳轉		for(var i = 0; i < contentULDot.length; i++) {			contentULDot[i].className = "";		}		contentULDot[index].className = "active";		//一次性觸發:切屏入場,當前index中包含出入場動畫,並且,這個index攜帶的animation是一個function		if(outInAnimations[index] && typeof outInAnimations[index]["inAnimation"] === "function") {			outInAnimations[index]["inAnimation"]();		}		//迴圈觸發,上一屏復位出場		if(outInAnimations[previousIndex] && typeof outInAnimations[previousIndex]["outAnimation"] === "function") {			outInAnimations[previousIndex]["outAnimation"]();		}	}	//2.滾屏	function scrollContent(e) {		e = e || event;		//判斷方向		var direction = "";		if(e.wheelDelta) {			direction = e.wheelDelta > 0 ? "up" : "down";		} else if(e.detail) {			direction = e.detail < 0 ? "up" : "down";		}		//上一屏的索引		previousIndex=indexDef;		switch(direction) {			case "up":				//向上,indexDef變小,需要遞減				if(indexDef > 0) {					indexDef--;					indicatorNav(indexDef);				}				break;			case "down":				if(indexDef < contentLis.length - 1) {					indexDef++;					indicatorNav(indexDef);				}				break;		}	}	//3.新增class	function addClass(node, className) {		var reg = new RegExp("\\b" + className + "\\b");		if(!reg.test(node.className)) {			node.className += (" " + className);		}	}	//4.移除class	function removeClass(node, className) {		if(node.className) {			var reg = new RegExp("\\b" + className + "\\b");			var classes = node.className;			node.className = classes.replace(reg, "");			if(/^\s*$/g.test(node.className)) {				node.removeAttribute("class");			}		} else {			node.removeAttribute("class");		}	}	//5.第四屏圖片:4等分	function boomCanvas(canvasUls) {		//獲取ul圖片data-src		ulImg = canvasUls.dataset.src;		//圖片寬度:w:260 h:200 radius:8 四等分=1/2		var ulImgWidth = canvasUls.offsetWidth / 2;		var ulImgHeight = canvasUls.offsetHeight / 2;		//建立圖片4份分割		for(var i = 0; i < 4; i++) {			//存入i,實現非同步呼叫indnex			//canvasUls.flag=i;			var liNodes = document.createElement("li");			liNodes.style.width = ulImgWidth + "px";			liNodes.style.height = ulImgHeight + "px";			var imgNode = document.createElement("img");			/*1.四等分座標			 * 左上:left:0      top:0        i%2=0   i/2=0			 * 右上:left:-width top:0		-i%2=1   i/2=0.5(向下取整Math.floor)			 * 左下:left:0      top:-height  i%2=0   i/2=1			 * 右下:left:-width top:-height  -i%2=1   i/2=1.5(向下取整)			 */			imgNode.style.left = -(i % 2) * ulImgWidth + "px";			imgNode.style.top = -Math.floor(i / 2) * ulImgHeight + "px";			//複製圖片src			imgNode.src = ulImg;			//li:放入img			liNodes.appendChild(imgNode);			//ul:放入li標籤			canvasUls.appendChild(liNodes);		}		//6.圖片炸裂		canvasUls.onmouseenter = function() {			/* 4等分的動畫變化			 * 左上:top:height   left:0			         右上:top:0        left:-2width			         左下:top:-height  left:width			         右下:top:-2height left:-width			 */			var canvasLiImg = this.querySelectorAll("li > img");			canvasLiImg[0].style.top = ulImgHeight + "px";			canvasLiImg[1].style.left = -2 * ulImgWidth + "px";			//canvasLiImg[2].style.top=-ulImgHeight+"px";			canvasLiImg[2].style.left = ulImgWidth + "px";			canvasLiImg[3].style.top = -2 * ulImgHeight + "px";			//canvasLiImg[3].style.left="px";		}		canvasUls.onmouseleave = function() {			var canvasLiImg = this.querySelectorAll("li > img");			canvasLiImg[0].style.top = 0 + "px";			canvasLiImg[1].style.left = -ulImgWidth + "px";			canvasLiImg[2].style.left = 0 + "px";			canvasLiImg[3].style.top = -ulImgHeight + "px";		}	}})123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775
圖片4等分,translate圖解

圖片炸裂實現offset圖解

輪播圖3D舞臺+景深效果翻轉

9
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • PlankFilza檔案管理器 | Rootless JB