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圖片炸裂實現offset圖解
輪播圖3D舞臺+景深效果翻轉
最新評論