/*鏍规嵁灞忓箷閫傞厤font-size*/ // ;(function (doc, win) { // var docEl = doc.documentElement, // resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize', // recalc = function () { // var clientWidth = docEl.clientWidth; // if (!clientWidth) return; // if(clientWidth>=750){ // docEl.style.fontSize = '100px';//灞忓箷澶т簬750锛宖ont-size:100px; // }else{ // docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; // } // }; // setTimeout(function(){console.log($('header').height());},1); // if (!doc.addEventListener) return; // win.addEventListener(resizeEvt, recalc, false); // doc.addEventListener('DOMContentLoaded', recalc, false); // })(document, window); /* author : zhcool; date : 2018/5/15; version : v0.0.3; */ ;(function($, window, document,undefined) { "use strict"; var Tfn = function() { this.header = $('header'), this.center = $('#wrapper'), this.footer = $('footer'), this.author = 'zhcool', this.windowWidth = ('innerWidth' in window) ? window.innerWidth : document.documentElement.clientWidth,//灞忓箷瀹藉害 this.windowHeight = ('innerHeight' in window) ? window.innerHeight : document.documentElement.clientHeight,//灞忓箷楂樺害 this.IEnum = null;//濡傛灉鏄痠e娴忚鍣紝ie鐨勭増鏈暟 this.isAnimating = false,//鍒ゆ柇杞挱鍔ㄧ敾鏄惁杩涜涓 this.isAnimating1 = false,//鍒ゆ柇涓嬫媺鍔ㄧ敾鏄惁杩涜涓 this.aniTime = 600, //鍔ㄧ敾鏃堕棿 this.isPc = null,//鏄惁涓簆c绔 this.rowNode = [],//椤甸潰鍧楄妭鐐瑰瓨鍌 this.appDirection = null,//鎵嬫満绔Е鎽告粦鍔ㄦ柟鍚 this.support = { animations : Modernizr.cssanimations },//鏄惁鏀寔1锛宎nimations this.animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, this.animEndEventName = this.animEndEventNames[ Modernizr.prefixed( 'animation' ) ], this.onEndAnimation = function( el, callback ) {//鍔ㄧ敾鎵€灞炲厓绱狅紝濡傛灉涓嶆敮鎸乤nimations鍥炶皟鍑芥暟銆 var self = this; var onEndCallbackFn = function( ev ) { if( self.support.animations ) { if( ev.target != this ) return; this.removeEventListener( self.animEndEventName, onEndCallbackFn ); } if( callback && typeof callback === 'function' ) { callback.call(); } }; if( self.support.animations ) { el.addEventListener( self.animEndEventName, onEndCallbackFn ); } else { onEndCallbackFn(); } }; /*var transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionEnd', 'msTransition' : 'MSTransitionEnd', 'transition' : 'transitionend' }, this.transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ]; //transition缁撴潫浜嬩欢*/ }; Tfn.prototype = { //鍒濆鍖 init : function() { var self = this; if (!!window.ActiveXObject || "ActiveXObject" in window){ $('body').addClass("ie"); this.IEnum = parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE","")); if(this.IEnum<9){ alert("鎮ㄧ殑娴忚鍣ㄧ増鏈繃浣庯紝璇蜂笅杞絀E9鍙婁互涓婄増鏈?);return false; }else if(this.IEnum==9){ $('body').addClass("ie9"); }else if(this.IEnum==10){ $('body').addClass("ie10"); }else if(this.IEnum==11){ $('body').addClass("ie11"); } } this.scrolly(); this.IsPC(); // this.storage(); this.contentInit(); this.appNav(); this.downMove(); imagesLoaded(document.querySelectorAll('img'), function () { self.picMove(); self.webGl_picMove(); }); // this.picCut(); this.dialog(); this.tabBox(); this.video_setting(); if(!this.isPc){ // this.touchMove(); this.fullMenu(); }else{ this.toTop(); } }, //transform婊氬姩鎯€ц宸紙鑳屾櫙婊氬姩瑙嗗樊锛 scrolly:function () { var defaults = { wrapper: '#scrolly', parent_move : true,//瀹瑰櫒璺熼殢鎯€ф粴鍔 targets : '.scrolly-el', bgParallax : false,//鑳屾櫙鎯€ф粴鍔 wrapperSpeed: 0.08, targetSpeed: 0.02, targetPercentage: 0.1, callback:function () {} }; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; var extend = function () { // Variables var extended = {}; var deep = false; var i = 0; var length = arguments.length; // Merge the object into the extended object var merge = function (obj) { for (var prop in obj) { if (obj.hasOwnProperty(prop)) { extended[prop] = obj[prop]; } } }; // Loop through each object and conduct a merge for ( ; i < length; i++ ) { var obj = arguments[i]; merge(obj); } return extended; }; var scrolly = function(){ this.Targets = []; this.TargetsLength = 0; this.wrapper = ''; this.windowHeight = 0; this.wapperOffset = 0; }; scrolly.prototype = { isAnimate: false, isResize : false, scrollId: "", resizeId: "", init : function(options){ this.settings = extend(defaults, options || {}); this.wrapper = document.querySelector(this.settings.wrapper); if(this.wrapper==="undefined"){ return false; } this.targets = document.querySelectorAll(this.settings.targets); document.body.style.height = this.wrapper.clientHeight + 'px'; this.windowHeight = window.clientHeight; this.attachEvent(); this.apply(this.targets,this.wrapper); this.animate(); this.resize(); }, apply : function(targets,wrapper){ if(this.settings.parent_move){ this.wrapperInit(); } this.targetsLength = targets.length; for (var i = 0; i < this.targetsLength; i++) { var attr = { offset : targets[i].getAttribute('data-offset'), speedX : targets[i].getAttribute('data-speed-x'), speedY : targets[i].getAttribute('data-speed-Y'), percentage : targets[i].getAttribute('data-percentage'), horizontal : targets[i].getAttribute('data-v') }; this.targetsInit(targets[i],attr); } }, wrapperInit: function(){ this.wrapper.style.width = '100%'; this.wrapper.style.position = 'fixed'; }, targetsInit: function(elm,attr){ this.Targets.push({ elm : elm, offset : attr.offset ? attr.offset : 0, offsetTop : $(elm).offset().top, hei : $(elm).height(), horizontal : attr.horizontal ? attr.horizontal : 0, top : 0, left : 0, speedX : attr.speedX ? attr.speedX : 1, speedY : attr.speedY ? attr.speedY : 1, percentage :attr.percentage ? attr.percentage : 0 }); }, scroll : function(){ var scrollTopTmp = document.documentElement.scrollTop || document.body.scrollTop; this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var offsetBottom = this.scrollTop + this.windowHeight; if(this.settings.parent_move){ this.wrapperUpdate(this.scrollTop); } for (var i = 0; i < this.Targets.length; i++) { if(this.scrollTop>(this.Targets[i].offsetTop-window.innerHeight*1.2)){ this.targetsUpdate(this.Targets[i]); } } }, animate : function(){ this.scroll(); this.scrollId = requestAnimationFrame(this.animate.bind(this)); }, wrapperUpdate : function(){ this.wapperOffset += (this.scrollTop - this.wapperOffset) * this.settings.wrapperSpeed; this.wrapper.style.transform = 'translate3d(' + 0 + ',' + Math.round(-this.wapperOffset* 100) / 100 + 'px ,' + 0 + ')'; this.myTop = Math.round(-this.wapperOffset* 100) / 100; this.settings.callback(Math.abs(this.myTop)); }, targetsUpdate : function(target){ var wH = $(window).height(); target.offsetTop = $(target.elm).offset().top; target.top += ((this.scrollTop - target.offsetTop + (wH-target.hei)/2) * Number(this.settings.targetSpeed) * Number(target.speedY) - target.top) * this.settings.targetPercentage; target.left += ((this.scrollTop - target.offsetTop + (wH-target.hei)/2) * Number(this.settings.targetSpeed) * Number(target.speedX) - target.left) * this.settings.targetPercentage; var targetOffsetTop = ( parseInt(target.percentage) - target.top - parseInt(target.offset) ); var offsetY = Math.round(targetOffsetTop * -100) / 100; var offsetX = 0; if(target.horizontal){ var targetOffsetLeft = ( parseInt(target.percentage) - target.left - parseInt(target.offset) ); offsetX = Math.round(targetOffsetLeft * -100) / 100; } if(this.settings.bgParallax){ if(target.horizontal){ $(target.elm).css({backgroundPosition: offsetX +'px 50%'}); }else{ $(target.elm).css({backgroundPosition: '50% ' + offsetY + 'px'}); } }else{ target.elm.style.transform = 'translate3d(' + offsetX + 'px ,' + offsetY + 'px ,' + 0 +')'; } }, resize: function(){ var self = this; self.windowHeight = (window.innerHeight || document.documentElement.clientHeight || 0); if( parseInt(self.wrapper.clientHeight) != parseInt(document.body.style.height)){ document.body.style.height = self.wrapper.clientHeight + 'px'; } self.resizeId = requestAnimationFrame(self.resize.bind(self)); }, attachEvent : function(){ var self = this; window.addEventListener('resize',(function(){ if(!self.isResize){ cancelAnimationFrame(self.resizeId); cancelAnimationFrame(self.scrollId); self.isResize = true; setTimeout((function(){ self.isResize = false; self.resizeId = requestAnimationFrame(self.resize.bind(self)); self.scrollId = requestAnimationFrame(self.animate.bind(self)); }),200); } })); } }; window.scrolly = new scrolly(); return scrolly; }, //鍐呭灞俶in-height contentInit:function(){ var self = this, minHeight =self.windowHeight - (self.header.height() + self.footer.height()); self.center.css('min-height',minHeight+'px'); $('[data-hei]').each(function(index,e){ var wid=$(this).width(), hei=parseInt(wid*($(this).attr('data-hei'))); $(this).css('height',hei+"px"); }); $("[data-ahref]").on('click',function () { var src = $(this).attr('data-ahref'); var type = $(this).attr('data-target'); if(type==1){ window.open(src); }else{ window.location.href=src; } }); }, // 娴忚鍣ㄧ増鏈 version:function(){ var explorer = window.navigator.userAgent ; if (explorer.indexOf("MSIE") >= 0||explorer.indexOf("Trident")>0 ) { if(explorer.indexOf("MSIE 5")>0||explorer.indexOf("MSIE 6")>0||explorer.indexOf("MSIE 7")>0||explorer.indexOf("MSIE 8")>0) { return 'LowerIEVersion'; }else{ return 'EdgeOrTrident'; } } else if (explorer.indexOf("Maxthon") >= 0) {return 'Maxthon';} else if (explorer.indexOf("Firefox") >= 0) {return 'FireFox';} else if(explorer.indexOf("Chrome") >= 0){ return 'Chrome';} else if(explorer.indexOf("Opera") >= 0){ return 'Opera';} else if(explorer.indexOf("Safari") >= 0){ return 'Safari';} }, // 缃戠珯鏍囪瘑 uunn:function(){ if(this.version()!='LowerIEVersion'&&this.version()=="Chrome") { console.log('%cUUNN+','display:block;padding: 0 50px;line-height: 76px;background:#f00;color: #fff; font-size: 40px;border-radius: 6px;') console.log('Powered by %cUUNN+%c brand creative vanguard.','color:#f00;font-weight: 900;',''); console.log('Learn more about us \nplease visit %chttp://www.uunn.cn','text-decoration: underline;'); } }, //瀵箂essionStorage鐨勬搷浣滐紙鍙湁绗竴娆″娴忚缃戠珯锛氭湁loading鍔ㄧ敾 锛 storage:function () { var self = this, loading = $('#loader'), stor = JSON.parse(sessionStorage.getItem('key')), info ={call:null};//瀵圭綉绔欐祻瑙堟鏁板瓨鍌 if(stor==null){ info.call=1; self.uunn(); sessionStorage.setItem('key',JSON.stringify(info)); }else{ info.call=stor.call+1; sessionStorage.setItem('key',JSON.stringify(info)); loading.remove(); } }, //鍒ゆ柇鏄惁涓簆c绔 IsPC:function(){ var self = this; var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); self.isPc = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { self.isPc = false; break; } } return self.isPc; }, //椤甸潰鍒囨崲锛堥拡瀵箂etinterval锛 VisibilityChange:function ( gofn , backfn ) { var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); var onVisibilityChange = function(){ if (!document[hiddenProperty]) { backfn.call(); }else{ gofn.call(); } }; document.addEventListener(visibilityChangeEvent, onVisibilityChange); }, //鎵嬫満鑿滃崟鍔ㄧ敾 appNav: function(){ var self = this, appNav = $('.app-nav'), getApp = appNav.find('.getAppNav'), appUl = appNav.find('ul'), appLi = appUl.find('li'), appDown = appLi.find('.child-nav'), appUlWid = appUl.attr('data-width'), showAni = appUl.attr('data-effect'), hideAni = appUl.attr('data-hideAni'); appUl.css('width',(this.windowWidth*appUlWid)+'px'); getApp.on('click',function(e){ if(self.isAnimating1) return false; self.isAnimating1 = true; var isActive = $(this).hasClass('menuActive'); $(this).toggleClass('menuActive'); if(isActive){ appLi.removeClass(showAni).addClass(hideAni); for(var i=0;i'; Tbox.find('.cutItem').append(str); } } Time = (Time+0.6)*1000; setTimeout(function(){ Tpic.show(); cutItem.hide(); },Time); }, //鍗曞紶鍥剧墖鍒囨崲鍔ㄧ敾(.Tpage,.moveNext,.movePrev); picMove:function(){ var self = this, picBox = $('.component'), ishave = picBox.length<=0 ? true : false; if(ishave) return false; var moveEffect = function (opts) { var animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, // animation end event name animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ], component = opts.parent || console.warn("no parent"), navNext = component.querySelector( '.moveNext' ), navPrev = component.querySelector( '.movePrev' ), pageChange = component.querySelector( '.pageChange' ),//鍙€夋嫨椤垫暟 timer = null, loop = opts.loop == 'true' ? true :false, loopTime = opts.loopTime || 4000;//杞挱闂撮殧鏃堕棿 function reinit(_this,dir) { var items = component.querySelector( 'ul.itemwrap' ).querySelectorAll('li'),//鍥剧墖椤 itemsCount = items.length, Tpage = $(component.querySelector( '.Tpage' )), current = parseInt(Tpage.attr( 'data-num' )), TpageChange = component.querySelectorAll( '[data-change]' ), ani = component.getAttribute('data-ani') == 'true' ? true : false, itemTxt = component.querySelectorAll( '[data-txt]'); clearTimeout(timer); if(dir === 'num'){ var Tnum = _this.attr('data-change'); } navigate( dir , Tnum , ani , component,items,itemsCount,Tpage,current,TpageChange,itemTxt); } function goloop() { if(loop){ timer=setTimeout(function () { reinit($(component),'next'); },loopTime); } } function navigate( dir , num , Tani, component, items, itemsCount, Tpage, current, TpageChange, itemTxt) { if( Tani ) return false; component.setAttribute('data-ani','true'); clearInterval(loop); var cntAnims = 0; var currentItem = items[ current ]; var currentTxt = $(itemTxt).eq(current); if( dir === 'next' ) { current = current < itemsCount - 1 ? current + 1 : 0; } else if( dir === 'prev' ) { current = current > 0 ? current - 1 : itemsCount - 1; } else if( dir === 'num'){ current = parseInt(num); } Tpage.html('0'+(current+1)).attr('data-num',current); $(TpageChange).eq(current).prevAll('li').addClass('lat2'); $(TpageChange).eq(current).addClass('on').removeClass('lat2'); $(TpageChange).eq(current).nextAll('li').removeClass('lat2'); $(TpageChange).eq(current).nextAll('li').removeClass('on'); $(TpageChange).eq(current).addClass('on'); // $(TpageChange).eq(current).addClass('on').siblings().removeClass('on'); var nextItem = items[ current ]; var nextTxt = $(itemTxt).eq(current); var onEndAnimationCurrentItem = function() { this.removeEventListener( animEndEventName, onEndAnimationCurrentItem ); classie.removeClass( this, 'current' ); currentTxt.removeClass('on txtHide'); classie.removeClass( this, dir === 'prev' ? 'navOutPrev' : 'navOutNext' ); ++cntAnims; if( cntAnims === 2 ) { component.setAttribute('data-ani','false'); goloop(); } }; var onEndAnimationNextItem = function() { this.removeEventListener( animEndEventName, onEndAnimationNextItem ); classie.addClass( this, 'current' ); nextTxt.addClass('on').removeClass('txtShow'); classie.removeClass( this, dir === 'prev' ? 'navInPrev' : 'navInNext' ); ++cntAnims; if( cntAnims === 2 ) { component.setAttribute('data-ani','false'); goloop(); } }; if( self.support.animations ) { currentItem.addEventListener( animEndEventName, onEndAnimationCurrentItem ); nextItem.addEventListener( animEndEventName, onEndAnimationNextItem ); classie.addClass( currentItem, dir === 'prev' ? 'navOutPrev' : 'navOutNext' ); classie.addClass( nextItem, dir === 'prev' ? 'navInPrev' : 'navInNext' ); currentTxt.addClass('txtHide'); nextTxt.addClass('txtShow'); } else { console.log('涓嶆敮鎸乧ss3 animated'); $(currentItem).hide(); $(nextItem).fadeIn(200); setTimeout(function(){ classie.removeClass( currentItem, 'current' ); classie.addClass( nextItem, 'current' ); component.setAttribute('data-ani','false'); },200) } } navNext.addEventListener( 'click', function( ev ) { reinit($(this),'next'); ev.preventDefault(); } ); navPrev.addEventListener( 'click', function( ev ) { reinit($(this),'prev'); ev.preventDefault(); } ); var list = pageChange.querySelectorAll( '[data-change]' ); for(var h=0;h canvasWidth) { renderW = renderWidth; } else { renderW = canvasWidth; } renderH = canvasHeight; var renderer = new THREE.WebGLRenderer({ antialias: false }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setClearColor(0x23272A, 1.0); renderer.setSize(renderW, renderH); parent.appendChild(renderer.domElement); if (renderHeight > canvasHeight) { $(renderer.domElement).css('transform','scale('+(renderHeight/canvasHeight)+')'); } var loader = new THREE.TextureLoader(); loader.crossOrigin = ""; images.forEach(function (img) { image = loader.load(img.getAttribute('src')); image.magFilter = image.minFilter = THREE.LinearFilter; image.anisotropy = renderer.capabilities.getMaxAnisotropy(); sliderImages.push(image); }); var length = sliderImages.length; var disp = loader.load(dispImage); disp.wrapS = disp.wrapT = THREE.RepeatWrapping; var scene = new THREE.Scene(); scene.background = new THREE.Color(0x23272A); var camera = new THREE.OrthographicCamera(renderWidth / -2, renderWidth / 2, renderHeight / 2, renderHeight / -2, 1, 1000); camera.position.z = 1; var mat = new THREE.ShaderMaterial({ uniforms: { effectFactor: { type: "f", value: intensity }, dispFactor: { type: "f", value: 0.0 }, texture: { type: "t", value: sliderImages[0] }, texture2: { type: "t", value: sliderImages[1] }, disp: { type: "t", value: disp } }, vertexShader: pix.vertex, fragmentShader: pix.fragment, transparent: true, opacity: 1.0 }); var geometry = new THREE.PlaneBufferGeometry(parent.offsetWidth, parent.offsetHeight, 1); var object = new THREE.Mesh(geometry, mat); object.position.set(0, 0, 0); scene.add(object); var addEvents = function addEvents() { var pagButtons = Array.from(parent.querySelector('.pagination').querySelectorAll('a')); pagButtons.forEach(function (el) { el.addEventListener('click', function () { var ani = parent.getAttribute('data-ani') == 'false' ? false : true; if (!ani) { parent.setAttribute('data-ani','true'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).removeClass('on'); $(this).prevAll('a').addClass('lat2'); $(this).addClass('on').removeClass('lat2'); $(this).nextAll('a').removeClass('lat2'); $(this).nextAll('a').removeClass('on'); var slideId = parseInt(this.dataset.slide, 10); $(parent.querySelector('.txt-item').querySelectorAll('li')).fadeOut(300); $(parent.querySelector('.txt-item').querySelectorAll('li')).eq(slideId).fadeIn(1200); change(slideId); } }); }); }; next.on('click',function () { var ani = parent.getAttribute('data-ani') == 'false' ? false : true; if (!ani) { parent.setAttribute('data-ani','true'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).removeClass('on'); var slideId = parseInt(parent.getAttribute('data-cur')) || 0; slideId = slideId < length-1 ? slideId + 1 : 0; $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).prevAll('a').addClass('lat2'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).addClass('on').removeClass('lat2'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).nextAll('a').removeClass('lat2'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).nextAll('a').removeClass('on'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).addClass('on'); $(parent.querySelector('.txt-item').querySelectorAll('li')).fadeOut(300); $(parent.querySelector('.txt-item').querySelectorAll('li')).eq(slideId).fadeIn(800); change(slideId); } }); prev.on('click',function () { var ani = parent.getAttribute('data-ani') == 'false' ? false : true; if (!ani) { parent.setAttribute('data-ani','true'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).removeClass('on'); var slideId = parseInt(parent.getAttribute('data-cur')) || 0; slideId = slideId > 0 ? slideId - 1 : length-1; $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).prevAll('a').addClass('lat2'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).addClass('on').removeClass('lat2'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).nextAll('a').removeClass('lat2'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).nextAll('a').removeClass('on'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).addClass('on'); $(parent.querySelector('.txt-item').querySelectorAll('li')).fadeOut(300); $(parent.querySelector('.txt-item').querySelectorAll('li')).eq(slideId).fadeIn(800); change(slideId); } }); function change(num) { clearTimeout(timer); mat.uniforms.texture2.value = sliderImages[num]; mat.uniforms.texture2.needsUpdate = true; TweenLite.to(mat.uniforms.dispFactor, 1, { value: 1, ease: easing, onComplete: function onComplete() { mat.uniforms.texture.value = sliderImages[num]; mat.uniforms.texture.needsUpdate = true; mat.uniforms.dispFactor.value = 0.0; self.isAnimating2 = false; parent.setAttribute('data-cur',num); parent.setAttribute('data-ani','false'); myloop(); } }); } addEvents(); setTimeout(function () { $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(0).addClass('on'); },100) function myloop(){ if(loop){ timer = setTimeout(function () { var ani = parent.getAttribute('data-ani') == 'false' ? false : true; if (!ani) { parent.setAttribute('data-ani','true'); var slideId = parseInt(parent.getAttribute('data-cur')) || 0; slideId = slideId < length-1 ? slideId + 1 : 0; change(slideId); if(slideId==0){ $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).removeClass('on'); $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).removeClass('lat2'); } setTimeout(function () { $(parent.querySelector('.pagination').querySelectorAll('[data-slide]')).eq(slideId).addClass('on'); },20); $(parent.querySelector('.txt-item').querySelectorAll('li')).fadeOut(300); $(parent.querySelector('.txt-item').querySelectorAll('li')).eq(slideId).fadeIn(1200); } },loopTime); } } window.addEventListener('resize', function (e) { renderer.setSize(renderW, renderH); }); var animate = function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); myloop(); }; picBox.each(function () { var el = $(this)[0]; var imgs = Array.from(el.querySelectorAll('.img-list')); new webGlEffect({ parent: el, intensity: el.getAttribute('data-intensity') || undefined, easing: el.getAttribute('data-easing') || undefined, images: imgs, direction:el.getAttribute('data-direction'), displacementImage: el.getAttribute('data-displacement'), loop:el.getAttribute('data-loop'), loopTime:el.getAttribute('data-loopTime') }); }); }, //寮圭獥 dialog:function(){ var self = this, have = $('[data-dialog]'), ishave = have.length<=0 ? true : false; if(ishave) return false; var dialogEffect = function (opts) { var parent = opts.el; var dialog = opts.dialog, closeBtn = dialog.find('[data-dialog-close]'), mask = dialog.find( '.dialog_mask' ), video = dialog.find('video'), morphEl = dialog.find('.morph-shape'); if(morphEl.length>0){ var path = morphEl[0].querySelector('path'), steps = { open : morphEl[0].getAttribute( 'data-morph-open' ), close : morphEl[0].getAttribute( 'data-morph-close' ) }; } var onOpenDialog = function(){ console.log("寮圭獥鎵撳紑"); var url = parent.attr('data-src'); if(morphEl.length>0){ anime({ targets: path, duration: 400, easing: 'linear', d: steps.open, complete: function() {} }); } if(video.length>0){ video.attr('src',url); video[0].currentTime=5; video[0].play(); } };//寮圭獥鎵撳紑鏃跺洖璋冨嚱鏁 var onCloseDialog = function(){ console.log("寮圭獥鍏抽棴"); if(morphEl.length>0){ anime({ targets: path, duration: 400, easing: 'linear', d: steps.close, complete: function() {} }); } if(video.length>0){ video[0].pause(); } };//寮圭獥鍏抽棴鏃跺洖璋冨嚱鏁 function dialogToggle(e,isOpen){ if( isOpen ) { classie.remove( e, 'dialog--open' ); classie.add( e, 'dialog--close' ); self.onEndAnimation(e.querySelector( '.dialog_content' ),function(){ classie.remove( e, 'dialog--close' ); onCloseDialog( ); }); } else { classie.add( e, 'dialog--open' ); // callback on open onOpenDialog( this ); } isOpen = !isOpen; e.setAttribute('data-isOpen',isOpen); } parent.on("click",function () { var isOpen = dialog.attr('data-isOpen') == 'true' ? true : false; var isclick = dialog.attr('data-isclick'); dialogToggle(dialog[0],isOpen); if(isclick == undefined){ closeBtn.on('click',function () { dialogToggle(dialog[0],true); }); mask.on('click',function () { dialogToggle(dialog[0],true); }); dialog.attr('data-isclick','true'); } }); }; have.each(function () { var _this = $(this), _dialog = $('#'+_this.attr('data-dialog')); new dialogEffect({ el:_this, dialog : _dialog }); }); }, //tab閫夐」 tabBox:function () { var self = this, Tbox = $( '.layout-tabBox' ), ishave = Tbox.length<=0 ? true : false; if(ishave) return false; var partItem = Tbox.find('.layout-part'), partName = null, partChoose = partItem.find('li'); partChoose.on('click',function (e) { partName = $(this).parents('.layout-part').attr('data-part'); var _this = $(this), item = $('.'+partName), list = _this.attr('data-list'); for(var i=0;i Math.abs(distanceY) && distanceX > 50) { self.appDirection='left'; } else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < (-50)) { self.appDirection='right'; } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 50) { self.appDirection='up'; } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < (-50)) { self.appDirection='down'; } }); }, //鍥炲埌椤堕儴 toTop:function () { var self = this; var top_btn = $('.toTop'), isHave = top_btn.length <= 0 ? true : false; if(isHave) return false; top_btn.on('click',function () { $("html,body").animate({scrollTop:0}, 600); }); $(window).scroll(function(){ if($(this).scrollTop()>(self.windowWidth/4)){ top_btn.addClass('on'); }else{ top_btn.removeClass('on'); } }); }, //瑙嗛鎾斁 video_setting:function () { var self = this, Tplay = $('[data-play]'), ishave = Tplay.length<=0 ? true : false; if(ishave) return false; var medio = null, isplay = null; Tplay.on('click',function () { var _this = $(this); medio = $('#'+$(this).attr('data-play')); isplay = $(this).hasClass('on') ? true : false; if(isplay){ medio[0].pause(); }else{ medio[0].play(); } _this.toggleClass('on'); medio.one('click',function () { isplay = _this.hasClass('on') ? true : false; console.log(isplay); if(isplay){ $(this)[0].pause(); }else{ $(this)[0].play(); } _this.toggleClass('on'); }); }); }, //椤甸潰鑺傜偣鐩镐簰鐩戝惉 nodeName:function () { var self = this, node = $('.nodeItem'), ishave = node.length<=0 ? true : false; if(ishave) return false; var name = $('.rowName'); for(var n=0;n400){ node.addClass('on'); }else{ node.removeClass('on'); } for(var i=self.rowNode.length-1;i>=0;i--){ var _this = self.rowNode[i]; if(top>=_this.top){ $('.nodeItem > a').eq(i).addClass('on').siblings().removeClass('on'); break; } } } $(window).scroll(function () { nodeChange(); }); } }; $.fn.myFn = function() { new Tfn().init(); }; })(jQuery, window, document); $(document).myFn(); //input[type=range] $.fn.RangeSlider = function(cfg){ this.sliderCfg = { min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null, step: cfg && Number(cfg.step) ? cfg.step : 1, callback: cfg && cfg.callback ? cfg.callback : null }; var $input = $(this); var min = this.sliderCfg.min; var max = this.sliderCfg.max; var step = this.sliderCfg.step; var callback = this.sliderCfg.callback; $input.attr('min', min) .attr('max', max) .attr('step', step); $input.bind("input", function(e){ $input.attr('value', this.value); $input.css( 'background-size', this.value + '% 100%' ); if ($.isFunction(callback)) { callback(this); } }); };