/* 运动算法 */ var Tween = { //t: 当前时间 b: 初始值 c: 变化量 d: 持续时间 //return: 返回的是运动到的目标点 linear: function (t, b, c, d){ //匀速 return c*t/d + b; }, easeIn: function(t, b, c, d){ //加速曲线 return c*(t/=d)*t + b; }, easeOut: function(t, b, c, d){ //减速曲线 return -c *(t/=d)*(t-2) + b; }, easeBoth: function(t, b, c, d){ //加速减速曲线 if ((t/=d/2) < 1) { return c/2*t*t + b; } return -c/2 * ((--t)*(t-2) - 1) + b; }, easeInStrong: function(t, b, c, d){ //加加速曲线 return c*(t/=d)*t*t*t + b; }, easeOutStrong: function(t, b, c, d){ //减减速曲线 return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeBothStrong: function(t, b, c, d){ //加加速减减速曲线 if ((t/=d/2) < 1) { return c/2*t*t*t*t + b; } return -c/2 * ((t-=2)*t*t*t - 2) + b; }, elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线(弹动渐入) if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线(弹动渐出) if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, elasticBoth: function(t, b, c, d, a, p){ if (t === 0) { return b; } if ( (t /= d/2) == 2 ) { return b+c; } if (!p) { p = d*(0.3*1.5); } if ( !a || a < Math.abs(c) ) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } if (t < 1) { return - 0.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; } return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; }, backIn: function(t, b, c, d, s){ //回退加速(回退渐入) if (typeof s == 'undefined') { s = 1.70158; } return c*(t/=d)*t*((s+1)*t - s) + b; }, backOut: function(t, b, c, d, s){ if (typeof s == 'undefined') { s = 3.70158; //回缩的距离 } return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, backBoth: function(t, b, c, d, s){ if (typeof s == 'undefined') { s = 1.70158; } if ((t /= d/2 ) < 1) { return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; } return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; }, bounceIn: function(t, b, c, d){ //弹球减振(弹球渐出) return c - Tween['bounceOut'](d-t, 0, c, d) + b; }, bounceOut: function(t, b, c, d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; } return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; }, bounceBoth: function(t, b, c, d){ if (t < d/2) { return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b; } return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b; } } Math.tween = Tween; /* 工具方法 */ var util = { viewWidth: document.documentElement.clientWidth || document.body.clientWidth, viewHeight: document.documentElement.clientHeight || document.body.clientHeight, /** * 添加事件绑定 * @param {object} oEl [description] * @param {string} sEvent [description] * @param {object} oFn [description] */ addHandler: function( oEl, sEvent, oFn ) { if ( oEl.addEventListener ) { oEl.addEventListener( sEvent, oFn, false ); } else if ( oEl.attachEvent ) { oEl.attachEvent( 'on' + sEvent, function() { oFn.call( this ); }) } else { oEl['on' + sEvent] = oFn; } }, /** * 取消事件绑定 * @param {object} oEl [description] * @param {string} sEvent [description] * @param {object} oFn [description] * @return {[type]} [description] */ removeHandler: function( oEl, sEvent, oFn ) { if ( oEl.removeEventListener ) { oEl.removeEventListener( sEvent, oFn, false ); } else if ( oEl.detachEvent ) { oEl.detachEvent( 'on' + sEvent, function() { oFn.call( this ); }) } else { oEl['on' + sEvent] = null; } }, /** * 阻止默认事件 * @param {object} ev [description] * @return {[type]} [description] */ preventDefault: function ( ev ) { if ( ev.preventDefault ) { ev.preventDefault(); } else { ev.returnValue = false; } }, /** * 阻止冒泡 * @param {object} ev [description] * @return {[type]} [description] */ stopPropagation: function ( ev ) { if ( ev.stopPropagation ) { ev.stopPropagation(); } else { ev.cancelBubble = true; } }, /** * 获取事件对象 * @param {object} ev [description] * @return {object} [description] */ getEvent: function( ev ) { return ev || window.event; }, /** * 获取事件目标 * @param {object} ev [description] * @return {object} [description] */ getTarget: function( ev ) { var ev = getEvent( ev ); return ev.target || ev.srcElement; }, /** * 获取鼠标滚轮值 * @param {object} ev [description] * @return {object} [description] */ getWheelDelta: function( ev ) { return ev.wheelDelta ? ev.wheelDelta : -ev.detail * 40; }, /** * 函数去抖 * @param {Function} fn [description] * @param {string} delay [description] * @return {object} [description] */ deBounce: function( oFn, iDelay ) { var timer = null; return function() { var context = this, args = arguments; clearTimeout( timer ); timer = setTimeout( function() { oFn.apply( context, args ); }, iDelay ); }; }, /** * 函数节流 * @param {object} oFn [description] * @param {string} iDelay [description] * @return {[type]} [description] */ throttle: function( oFn, iDelay ){ var timer = null; return function() { var context = this, args = arguments; clearTimeout( timer ); timer = setTimeout( function(){ oFn.apply( context, args );//context调用fn的方法,指针指向了fn }, iDelay ); } }, /** * 获取最终样式 * @param {object} oEl [description] * @param {string} sAttr [description] * @return {object} [description] */ getStyle: function( oEl, sAttr ){ if( oEl.currentStyle ){ return oEl.currentStyle[sAttr]; } else { return getComputedStyle( oEl, false )[sAttr]; } }, /** * 获取当前时间 * @return {string} [description] */ now: function() { return ( new Date() ).getTime(); }, /** * 动画函数 * 定时器 + requestAnimationFrame * @param {object} obj [description] * @param {object} json [description] * @param {string} time [description] * @param {string} fx [description] * @param {Function} fn [description] * @return {[type]} [description] */ animate: function( obj, json, time, fx, fn ){ var iCur = {}, startTime = util.now(), requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000/60) }, cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || clearTimeout; // 初始值 for ( var attr in json ) { iCur[attr] = 0; if ( attr == 'opacity' ){ iCur[attr] = Math.round( util.getStyle( obj, attr ) * 100 ); } else { iCur[attr] = parseInt( util.getStyle( obj, attr ) ); } } function doMove() { var changeTime = util.now(); var t = time - Math.max( 0, startTime - changeTime + time ) //范围:0到time for ( var attr in json ) { var value = Math.tween[fx]( t, iCur[attr], json[attr] - iCur[attr], time ); if ( attr == 'opacity' ) { obj.style.opacity = value / 100; obj.style.filter = 'alpha( opacity=' + value + ' )'; } else { obj.style[attr] = value + 'px'; } } obj.timer = requestAnimationFrame( doMove ); if ( t == time ) { cancelAnimationFrame( obj.timer ); fn && fn.call( obj ); } } obj.timer = requestAnimationFrame( doMove ); }, /** * 获取 m-n 的随机数 * @param {[type]} m [description] * @param {[type]} n [description] * @return {[type]} [description] */ getRandom: function(m, n) { return Math.round( ( n - m ) + Math.random() * m ); }, isClassExist: function( string ) { return new RegExp(/\\b + string + \\b/, 'g'); }, /** * 添加class方法 * @param {object} oEl [description] * @param {string} sClass [description] */ addClass: function( oEl, sClass ) { if ( !oEl.className ) { oEl.className = sClass; } else { if ( !util.isClassExist( sClass ).test( oEl.className ) ) { oEl.className += ' ' + sClass; } } } } var pages = (function( util ) { var // 页面索引 iPageIndex = 0, // 页面动画开关 oPageBtn = false, // 页面容器 oPages = document.querySelector('.pages'), // 页面集合 aPages = document.querySelectorAll('.page'), // 页面数量 aPagesNum = aPages.length; // 页面右侧导航 oPageNav = document.querySelector('.page-nav'), // 固定右侧导航集合 aPageNavItem = oPageNav.getElementsByTagName('li'), // 固定右侧导航个数 iPageNavLen = aPageNavItem.length, // 当前页码 iCurPage = 0, // 层级 iPageZindex = 0; // 下一页按钮 oPageNext = document.querySelector('.page-next'), // 定时器 oPageChangeTimer = null; /** * 设置页面位置 */ var setSlidePos = function () { for ( var i = 0; i < aPagesNum; i++ ) { if ( i == iPageIndex ) { aPages[i].style.top = '0'; } else if ( i < iPageIndex ) { aPages[i].style.top = '-100%'; } else { aPages[i].style.top = '100%'; } } } setTimeout( function() { for ( var i = 0; i < aPagesNum; i++ ) { aPages[i].style.opacity = 1; } }, 1000) setSlidePos(); /** * 滚动触发的函数 * @param {object} ev [description] * @return {[type]} [description] */ var scroll = function( ev ) { var // 事件对象 ev = util.getEvent( ev ), // 滚轮值 iWheelDelta = util.getWheelDelta( ev ); if ( oPageBtn ) { oPageBtn = false; // 判断滚动值 if ( iWheelDelta < 0 ) { // 向下滚动 iPageIndex === aPagesNum - 1 ? iPageIndex = aPagesNum - 1 : iPageIndex++; } else { // 向上滚动 iPageIndex === 0 ? iPageIndex = 0 : iPageIndex--; } // 滚屏动画(连续点击一个按钮两次,不播放动画) if ( iCurPage != iPageIndex ) { scrollAnimation(); } // 最后一页不显示箭头 judgeFinallyPage(); // 更新右侧导航索引 reflashPageNav(); } } /** * 判断最后一页不显示箭头 * @return {null} [description] */ var judgeFinallyPage = function () { // 判断最后一页 if ( iPageIndex === aPagesNum - 1 ) { oPageNext.style.display = 'none'; } else { oPageNext.style.display = 'block'; } } /** * 更新右侧导航状态 * @return {[type]} [description] */ var reflashPageNav = function() { for ( var i = 0; i < iPageNavLen; i++ ) { for ( var i = 0; i < iPageNavLen; i++ ) { aPageNavItem[i].className = ''; } aPageNavItem[iPageIndex].className = 'active'; } }; // 更新右侧导航状态,先调用一次 reflashPageNav(); /** * 滚屏动画管理 * @return {[type]} [description] */ var scrollAnimation = function() { switch ( iPageIndex ) { case 0: page1Out(); page1In(); page2Out(); break; case 1: page1Out(); page2Out(); page2In(); page3Out(); break; case 2: page2Out(); page3Out(); page3In(); page4Out(); break; case 3: page3Out(); page4Out(); page4In(); // page5Out(); break; case 4: page4Out(); // page5Out(); // page5In(); page6Out(); page6In(); break; // case 5: // page6Out(); // // page5Out(); // page6In(); // break; } // 切屏层级设置,当前为2,其他为1 for ( var i = 0; i < aPagesNum; i++ ) { aPages[i].style.zIndex = 1; } aPages[iPageIndex].style.zIndex = 2; // 当前屏幕动画 util.animate( aPages[iPageIndex], { top: 0, }, 600, 'easeOutStrong') /*aPages[iPageIndex].style.top = 0; aPages[iPageIndex].style.transition = 'all 1s cubic-bezier(0.885, 0.135, 0.15, 0.86)';*/ // 清除设置位置的定时器,确保每次走一个,不重叠 clearTimeout( oPageChangeTimer ); // 切屏完毕一秒后调用设置位置函数 oPageChangeTimer = setTimeout( setSlidePos, 1000 ); // 索引对应,当前屏 iCurPage = iPageIndex; } /** * 下一页点击切换 * @return {[type]} [description] */ var clickPageNext = function() { var oPageNext = document.querySelector('.page-next'); util.addHandler( oPageNext, 'click', function() { iCurPage = iPageIndex === aPagesNum - 1 ? iPageIndex = aPagesNum - 1 : iPageIndex++; // 更新右侧导航 reflashPageNav(); // 滚屏动画 scrollAnimation(); // 判断最后一页 judgeFinallyPage(); } ); }(); /** * 点击右侧导航 * @return {[type]} [description] */ var clickPageNav = function() { for ( var i = 0; i < iPageNavLen; i++ ) { aPageNavItem[i].index = i; util.addHandler( aPageNavItem[i], 'click', function() { for ( var i = 0; i < iPageNavLen; i++ ) { aPageNavItem[i].className = ''; } this.className = 'active'; iPageIndex = this.index; // 最后一页不显示箭头 judgeFinallyPage(); // 首尾屏幕动画 FirstLastAnimation(); // 滚屏动画(连续点击一个按钮两次,不播放动画) if ( iCurPage != iPageIndex ) { scrollAnimation(); } } ); } /** * 首尾屏点击动画 */ function FirstLastAnimation() { if ( this.index === iPageNavLen - 1 ) { page6Out(); } else if ( this.index === 0 ) { page1Out(); } } }(); var // 页面包裹层集合 aPageWrap = document.querySelectorAll('.page-wrap'), // 页面包裹层个数 iPageWrapLen = aPageWrap.length; /** * 计算页面尺寸 * @return {[type]} [description] */ var calcSize = function() { // 重新计算可视区宽高 var docEle = document.documentElement || document.body; util.viewHeight = docEle.clientHeight || docEle.clientHeight; util.viewWidth = docEle.clientWidth || docEle.clientWidth; // 调整页面大小 for ( var i = 0; i < aPagesNum.length; i++ ) { aPages[aPagesNum].style.width = util.viewWidth + 'px'; aPages[aPagesNum].style.height = util.viewHeight + 'px'; } // 动画函数重新调整外框位置 scrollAnimation(); // 小屏幕缩放,尺寸改变重新调用一次 smallScreen(); changeScreenSize(); } /** * 页面登录按钮点击 * @return {[type]} [description] */ var pageLoginClick = function() { var // 登录弹窗 oLoginDialog = document.getElementById('login'), // 登录按钮 oLoginBtn = document.querySelector('.login-btn'); // 登录 util.addHandler( oLoginBtn, 'click', function() { oPageBtn = false; } ); }; var // page1 包裹层 oPage1OverflowWrap = document.querySelector('.page1-overflow-wrap'), // page1 人物集合 oPage1Persons = document.querySelector('.page1-persons'), // page1 人物 aPage1Persons = document.querySelectorAll('.page1-person'), iPage1PersonsLen = aPage1Persons.length, // page1 水花 oPage1BgTop = document.querySelector('.page1-bg-top'), oPage1BgBottom = document.querySelector('.page1-bg-bottom'); var // page1 标题 oPage1Title = document.querySelector('.page1-title'), // page1 我要投稿 oPage1Draft = document.querySelector('.page1-draft'), // page1 人物集合 aPage1Person = document.querySelector('.page1-persons').getElementsByTagName('img'), // page1 人物个数 iPage1PersonLen = aPage1Person.length, // page1 top oPage1LeftTop = document.querySelector('.page1-bg-top'), // page1 bottom oPage1RightBottom = document.querySelector('.page1-bg-bottom'); /** * page1 出场动画 * @return {[type]} [description] */ var page1Out = function() { oPageBtn = false; // 人物位置初始化 for ( var i = 0; i < iPage1PersonLen; i++ ) { if ( i % 2 ) { aPage1Person[i].style.right = - util.viewWidth + 'px'; } else { aPage1Person[i].style.left = - util.viewWidth + 'px'; } } // page1 顶部水花 oPage1LeftTop.style.left = -util.viewWidth + 'px'; oPage1LeftTop.style.top = -util.viewHeight + 'px'; // page1 底部水花 oPage1RightBottom.style.right = -util.viewWidth + 'px'; oPage1RightBottom.style.bottom = -util.viewHeight + 'px'; // page1 标题 oPage1Title.style.opacity = 0; oPage1Title.style.transition = 'none'; oPage1Title.style.transform = 'scale(1.8) translateZ(800px)'; // page1 我要投稿入场 oPage1Draft.style.opacity = 0; oPage1Title.style.transition = 'none'; oPage1Draft.style.transform = 'scale(.8) translateZ(-800px)'; } /** * page1 入场动画 * @return {[type]} [description] */ var docw = document.documentElement.clientWidth || document.body.clientWidth; var zoom = docw / 1920; var // 延迟变量 iDelay = 0, // page1 人物位置集合 iPage1PersonPos = [ {left: -130, bottom: 264}, {right: -132, top: 0}, {left: 0, bottom: 278}, {right: -174, top: 130}, {left: 0, bottom: 0}, {right: -79, top: 288} ]; var page1In = function() { console.log( 'page1In' ); docw = document.documentElement.clientWidth || document.body.clientWidth; zoom = docw / 1920; // 人物入场 for ( var i = 0; i < iPage1PersonLen; i++ ) { // 延迟处理,让人物出现有时间间隔 if ( i % 2 ) { util.animate( aPage1Person[i], { right: iPage1PersonPos[i].right * zoom, top: iPage1PersonPos[i].top * zoom }, 1000 + iDelay, 'easeOutStrong' ) // 时间间隔设置 iDelay += 300 } else { util.animate( aPage1Person[i], { left: iPage1PersonPos[i].left * zoom, bottom: iPage1PersonPos[i].bottom * zoom }, 1000 + iDelay, 'easeOutStrong' ) } } // 前景入场 util.animate( oPage1LeftTop, { left: 0, top: 0, }, 1500, 'easeOutStrong' ) if ( isLowIE() ) { util.animate( oPage1RightBottom, { right: -193, bottom: -92, }, 1500, 'easeOutStrong' ) } else { util.animate( oPage1RightBottom, { right: 0, bottom: 0, }, 1500, 'easeOutStrong' ) } // page1 标题入场 oPage1Title.style.opacity = 1; oPage1Title.style.transform = 'scale('+zoom+') translateZ(0)'; oPage1Title.style.transformOrigin = 'center center'; oPage1Title.style.transition = 'all 1s 1s'; // 我要投稿 oPage1Draft.style.opacity = 1; oPage1Draft.style.transform = 'scale('+zoom+') translateZ(0)'; oPage1Draft.style.transformOrigin = 'center top'; oPage1Draft.style.transition = 'all 1s 1s'; oPage1Draft.style.marginTop = 230 * zoom + 'px'; // 滑屏开关控制 setTimeout( function() { oPageBtn = true; }, 3000 ) } var // 动画开关 oPage2Btn = true, oContainer = document.querySelector('#container'), oLowIe = document.querySelector('.lowIe'); function isLowIE() { if (!!window.ActiveXObject || "ActiveXObject" in window) { if ( navigator.userAgent.indexOf("Edge") === -1 ) { return true; } } } function isEdge() { if ( navigator.userAgent.indexOf("Edge") !== -1 ) { return true; } } /** * page2 出场 * @return {[type]} [description] */ var page2Out = function() { oContainer.className = 'container'; } /** * page2 入场 * @return {[type]} [description] */ var page2In = function() { oContainer.className = 'container on'; setTimeout(function() { oPageBtn = true; }, 1500) } var // 随机背景容器 oRandomBg1 = document.querySelector('#random-bg1'), oRandomBg2 = document.querySelector('#random-bg2'), // 随机背景开关 oRandomTimer = null, // 随机形状转换开关 bShapeChange = true, // 默认随机形状 sShape = 'circle'; /** * 创建随机形状 * @param {object} oContainer [description] * @param {init} iRowNum [description] * @param {string} sShape [description] * @return {[type]} [description] */ var createRandomShape = function( oContainer, iRowNum, sShape ) { var // 随机数量的形状 iRandomNum = util.getRandom( 4, 10 ), // 默认距离左边的值 SHAPE_LEFT = 50, // 默认距离顶部的值 SHAPE_TOP = 50, // 比例控制值 LEFT_SCALE_NUM = 80; for ( var i = 0; i < iRandomNum; i++ ) { // 随机形状的大小 iRandomSize = util.getRandom( 20, 30 ); var oShape = document.createElement('div'); oShape.className = 'small-shape'; oShape.style.position = 'absolute'; oShape.style.zIndex = -1; oShape.style.left = SHAPE_LEFT + ( i + 1 ) * LEFT_SCALE_NUM * util.getRandom( 10, 12 ) + 'px'; oShape.style.top = SHAPE_TOP + iRowNum * util.getRandom( 40, 200 ) + 'px'; oShape.style.width = iRandomSize + 'px'; oShape.style.height = iRandomSize + 'px'; // 判断形状 if ( sShape === 'circle' ) { oShape.style.borderRadius = '50%'; } else { oShape.style.transform = 'rotateZ(45deg)'; } oContainer.appendChild( oShape ); } } /** * 随机形状运动 * @return {[type]} [description] */ var moveRandomShape = function() { var // 背景随机形状集合 aShapes = document.querySelectorAll('.small-shape'), // 背景随机形状长度 iShapesLen = aShapes.length; for ( var i = 0; i < iShapesLen; i++ ) { util.animate( aShapes[i], { width: aShapes[i].offsetWidth + 20, height: aShapes[i].offsetHeight + 20, opacity: 0 }, 2000, 'easeIn', function() { oRandomBg1.innerHTML = ''; oRandomBg2.innerHTML = ''; }); } } /** * 随机形状出现 * @return {[type]} [description] */ var randomIn = function( bg ) { // 形状交替出现 clearInterval( oRandomTimer ); oRandomTimer = setInterval( function() { if ( bShapeChange ) { sShape = 'square'; bShapeChange = false; } else { sShape = 'circle'; bShapeChange = true; } // 创建三行随机形状 createRandomShape( bg, 1, sShape ); createRandomShape( bg, 2, sShape ); createRandomShape( bg, 3, sShape ); // 运动随机形状 moveRandomShape(); }, 3000 ); } var // page3 大标题 oPage3MainTitle = document.querySelector('.page3 .page-title'), // page3 标题描述集合 oPage3TitleDecr = document.querySelectorAll('.page3 .page-decr'), // page3 标题描述个数 iPage3TitleDecrLen = oPage3TitleDecr.length, // 多元化标题 oMultivariateTitle = document.querySelector('.multivariate-title'), // 大圆 oPage3BigCircle = document.querySelector('.circle-3d-room'); // 黄色圆 oCircleYellow = document.querySelector('.circle-yellow'), // 蓝色圆集合 aCircleBlue = document.querySelectorAll('.circle-blue'), // 蓝色圆个数 iCircleBlueLen = aCircleBlue.length, // 蓝色圆属性值集合 aBottom = [24, 74, 80, 86, 92, 166], // 图标集合 aCircleIco = document.querySelectorAll('.circle-ico'), iCircleIcoLen = aCircleIco.length, // page3 入场定时器 oPage3DelayTimer1 = null, oPage3DelayTimer2 = null, oPage3DelayTimer3 = null, oPage3DelayTimer4 = null, oPage3DelayTimer5 = null, // 放大镜 oXMove = document.querySelector('.hot-testing').getElementsByTagName('span')[0], oYMove = document.querySelector('.hot-testing').getElementsByTagName('b')[0]; /** * 画椭圆 * @return {[type]} [description] */ var drawEllipse = function() { var // x 坐标 iCircleX = 960, // y 坐标 iCircleY = 590, // 半径 iCircleR = 493, // 初始角度 iInitDeg = 0, // 最终 x 坐标 iTargetX = 0, // 最终 y 坐标 iTargetY = 0, // 定时器 oTimer = null, // dot oDot = document.querySelector('.dot'), oDot2 = document.querySelector('.dot2'); oTimer = setInterval( function() { iInitDeg++; iTargetX = Math.round( Math.sin( iInitDeg * Math.PI / 180 ) * iCircleR ); iTargetY = Math.round( Math.cos( iInitDeg * Math.PI / 180 ) * iCircleR ); // x 轴 //oDot.style.left = iTargetX + 470 + 'px'; // y 轴 //oDot.style.top = iTargetY * 0.4 + 420 + 'px'; //oDot2.style.top = iTargetY * 0.4 + 420 + 'px'; // z 轴 //oDot.style.width = iTargetY / iCircleR * 25 + 55 + 'px'; //oDot.style.height = iTargetY / iCircleR * 25 + 55 + 'px'; /*var oDiv = document.createElement('div'); oDiv.style.border = '1px solid rgba(255, 255, 255, .3)'; oDiv.style.position = 'absolute'; oDiv.style.left = iTargetX + 410 + 'px'; oDiv.style.width = iTargetY / iCircleR * 25 + 55 + 'px'; oDiv.style.height = iTargetY / iCircleR * 25 + 55 + 'px'; document.querySelector('.track').appendChild(oDiv);*/ }, 60) } /** * page3 出场 * @return {[type]} [description] */ var page3Out = function() { // page3 大标题 oPage3MainTitle.style.transition = 'all .1s .6s'; oPage3MainTitle.style.transform = 'scale(4) translateZ(800px)'; // page3 标题描述 for ( var i = 0; i < iPage3TitleDecrLen; i++ ) { oPage3TitleDecr[i].style.opacity = 0; } // 黄色大圆 oCircleYellow.style.opacity = 0; oCircleYellow.style.top = 50 + 'px'; // 蓝色圆 for ( var i = 0; i < iCircleBlueLen; i++ ) { aCircleBlue[i].style.opacity = 0; aCircleBlue[i].style.bottom = 10 * i + aBottom[i] + 'px'; } // 最后两个圆 aCircleIco[4].style.opacity = 0; aCircleIco[4].style.transform = 'translateY(50px)'; aCircleIco[4].style.transition = 'all 1s'; aCircleIco[5].style.opacity = 0; aCircleIco[5].style.transform = 'translateY(50px)'; aCircleIco[5].style.transition = 'all 1s'; // 前4个圆 for ( var i = 0; i < iCircleIcoLen - 2; i++ ) { aCircleIco[i].style.opacity = 0; } // 扫描 document.querySelector('.dot').style.animation = 'none'; document.querySelector('.dot2').style.animation = 'none'; // 放大镜 oXMove.style.animation = 'none'; oYMove.style.animation = 'none'; } // page3 入场 var page3In = function() { // page3 标题入场 oPage3MainTitle.style.transform = 'scale(1) translateZ(0)'; oPage3MainTitle.style.transition = 'all 1s'; // page3 标题描述入场 clearTimeout( oPage3DelayTimer1 ) oPage3DelayTimer1 = setTimeout( function() { // page3 标题描述 for ( var i = 0; i < iPage3TitleDecrLen; i++ ) { util.animate( oPage3TitleDecr[i], { opacity: 100 }, 1000 + i * 100, 'linear'); } // 黄色圆 util.animate( oCircleYellow, { opacity: 100, top: 0, }, 200, 'linear') }, 300 ) clearTimeout( oPage3DelayTimer2 ); oPage3DelayTimer2 = setTimeout( function() { // 蓝色圆 for ( var i = 0; i < iCircleBlueLen; i++ ) { util.animate( aCircleBlue[i], { opacity: 100, bottom: aBottom[i] }, 100 + 50 * i, 'linear', function() { } ) } }, 500 ) // 热点监测出现 setTimeout( function() { aCircleIco[5].style.opacity = 1; aCircleIco[5].style.transform = 'translateY(0)'; aCircleIco[5].style.transition = 'all .2s'; }, 500 ) clearTimeout( oPage3DelayTimer3 ) oPage3DelayTimer3 = setTimeout( function() { oPageBtn = true; // 黄色扫描 document.querySelector('.dot').style.animation = 'seaning 1s linear'; // 放大镜扫描 oXMove.style.animation = 'xAxis 1s 1 ease-in'; oYMove.style.animation = 'yAxis 1s 1 ease-out'; // 4个小图标出现 for ( var i = 0; i < iCircleIcoLen - 2; i++ ) { util.animate( aCircleIco[ iCircleIcoLen - 3 - i ], { opacity: 100 }, 200 + 200 * i, 'backIn') } // 效果追踪出现 aCircleIco[4].style.opacity = 1; aCircleIco[4].style.transform = 'translateY(0)'; aCircleIco[4].style.transition = 'all .2s .8s'; // 蓝色扫描 document.querySelector('.dot2').style.animation = 'seaning2 1.5s 1.2s linear'; }, 800) // 随机形状出现 randomIn( oRandomBg1 ); // 画椭圆 //drawEllipse(); } var // page4 5个项目小圆集合 aCircleItem = document.querySelectorAll('.circle-item'), // page4 5个项目小圆长度 iCircleItemLen = aCircleItem.length, // page4 定时器 oDropCicleTimer = null; /** * 小圆滑动方法 * @return {[type]} [description] */ var slideCicle = function( j, dir ) { var // 半径1000 r = 1240, // 圆心横坐标 x = 610, // 圆心纵坐标 y = 1895, // 运动坐标初始x值 a = 0, // 运动坐标初始y值 b = 0, oTimer = null, // 初始角度 iInitDeg = 245, // 标题 aCicleItem = document.querySelectorAll('.circle-item'), aCicleItemTitle = document.querySelectorAll('.circle-item h4'), aCicleItemDecr = aCicleItem[j].getElementsByTagName('p'); // 弧度动画 a = Math.round( Math.cos( ( iInitDeg + ( j ) * 10 )* Math.PI / 180 ) * r + x ); b = Math.round( Math.sin( ( iInitDeg + ( j ) * 10 )* Math.PI / 180 ) * r + y - 665 ); // 520 aCircleItem[j].timer = null; clearTimeout( aCircleItem[j].timer ); aCircleItem[j].timer = util.animate( aCircleItem[j], { left: a, top: b, }, 1000, 'easeOutStrong',function() { if ( j === 3 ) { oPageBtn = true; } }); aCicleItemTitle[j].style.opacity = 1; // 文字显示 for ( var i = 0; i < aCicleItemDecr.length; i++ ) { aCicleItemDecr[i].style.opacity = 1; } } /** * 向下掉圆 * @return {[type]} [description] */ var dropCicle = function() { var // 圆形下落顺序 aCircleItemOrder = [0, 1, 2], aCircleItemOrder2 = [5, 4, 3]; // 有一定间隔的向下掉圆 for ( var i = 0; i < aCircleItemOrder.length; i++ ) { // 自定义定时器属性 aCircleItemOrder[i].timer = null; ( function( i ) { clearTimeout( aCircleItemOrder[i].timer ); aCircleItemOrder[i].timer = setTimeout( function() { util.animate( aCircleItem[aCircleItemOrder[i]], { top: 0, left: 610, opacity: 100 }, 1000, 'backIn', function() { // 动画结束后 slideCicle( aCircleItemOrder[i], 'left' ); }); util.animate( aCircleItem[aCircleItemOrder2[i]], { top: 0, left: 610, opacity: 100 }, 1200, 'backIn', function() { // 动画结束后 slideCicle( aCircleItemOrder2[i], 'right' ); }); }, 200 * i ); } )( i ); } } var oPage4MainTitle = document.querySelector('.page4 .page-title'); /** * page4 出场 * @return {[type]} [description] */ var page4Out = function() { // 大标题 oPage4MainTitle.style.transition = 'all .1s .6s'; oPage4MainTitle.style.transform = 'scale(4) translateZ(800px)'; // 位置初始化 for ( var i = 0; i < iCircleItemLen; i++ ) { aCircleItem[i].style.top = -600 + 'px'; aCircleItem[i].style.left = '50%'; aCircleItem[i].style.opacity = 0; } } /** * page4 入场 * @return {[type]} [description] */ var page4In = function() { // page4 标题入场 oPage4MainTitle.style.transform = 'scale(1) translateZ(0)'; oPage4MainTitle.style.transition = 'all 1s'; // 随机形状出现 randomIn( oRandomBg2 ); // 向下掉圆 dropCicle(); } var stopRandomBg = function() { util.addHandler( window, 'blur', function() { clearInterval( oRandomTimer ); }) util.addHandler( window, 'focus', function() { randomIn( oRandomBg1 ); randomIn( oRandomBg2 ); }) }(); var // 主标题 // oPageMainTitle = document.querySelector('.page5 .page-title'), // 标题描述 // oPageTitleDecr = document.querySelector('.page5 .page-decr'), // 资源标题 oResourcesMainTitle = document.querySelector('.resources-title'), oResourcesTitle = document.querySelector('.resources-ico'), // 平台标题 oPlatformTitle = document.querySelector('.platform-ico'), // 平台包裹层 oPlatformWrap = document.querySelector('.platform-wrap'), // 平台logo列表 oPlatformList = document.querySelector('.platform-list'), // 平台logo集合 aPlatformItem = document.querySelectorAll('.platform-item'), // 平台logo个数 iPlatformItemLen = aPlatformItem.length, // 平台按钮 oPlatformBtnPrev = document.querySelector('.platform-prev'), oPlatformBtnNext = document.querySelector('.platform-next'), // 点击logo切换开关 oPlatBtn = true, // page5 定时器 // oPage5DelayTimer1 = null, // oPage5DelayTimer2 = null, // oPage5DelayTimer3 = null, // 平台计数器 iPlatformNum = 0, // 图片包裹层 oWrap = document.querySelector('.resources-wrap'), oResourcesList = document.querySelector('.resources-list'), oResourcesListWrap = document.querySelector('.resources-list-wrap'), // 上下页 oResourcesPrev = document.querySelector('.resources-prev'), oResourcesNext = document.querySelector('.resources-next'), // 左右蒙层 oFixLeft = document.querySelector('.fixed-left'), oFixRight = document.querySelector('.fixed-right'), // 图片集合 aResourcesItem = null, // 图片个数 iResourcesLen = 0, // 按钮集合 aResourcesBtn = document.querySelectorAll('.resources-btn'), // 按钮个数 aResourcesBtnLen = aResourcesBtn.length; /** * 平台logo动画 * @return {[type]} [description] */ var changeLogoAnimate = function() { util.animate( oPlatformList, { left: -1200 * iPlatformNum, }, 1000, 'elasticOut', function() { oPlatBtn = true; } ); } /** * 平台logo * @return {[type]} [description] */ var changeLogo = function() { // 设置宽度 oPlatformList.style.width = ( aPlatformItem[0].offsetWidth + 8 ) * iPlatformItemLen + 'px'; // 上一个按钮点击 util.addHandler( oPlatformBtnPrev, 'click', function() { if ( oPlatBtn ) { if ( iPlatformNum === 0 ) { iPlatformNum = 1; } else { iPlatformNum--; } // logo 点击运动 changeLogoAnimate(); // 关闭开关 oPlatBtn = false; } } ); // 下一个按钮点击 util.addHandler( oPlatformBtnNext, 'click', function() { if ( oPlatBtn ) { if ( iPlatformNum === 1 ) { iPlatformNum = 0; } else { iPlatformNum++; } // logo 动画 changeLogoAnimate(); // logo 开关关闭 oPlatBtn = false; } } ); } // 创建图片 function createImg() { var str = '', attrText = [ '天天快报', 'QQ浏览器', '兴趣部落', 'QQ空间', '腾讯手机管家', '手机QQ', '游戏官网', '游戏客户端', '游戏助手', '微信', '应用宝', '腾讯视频', '企鹅号', 'QQ看点', '腾讯新闻', ]; // 循环拼接 dom 字符串 for ( var i = 0; i < 15; i++ ) { if ( i < 7 ) { // 左侧 str += '
'+ attrText[i] +'
' + ''+ attrText[i] +'
' + ''+ attrText[i] +'
' + '