var alan = (function(document, undefined) { var readyre = /complete|loaded|interactive/; var idselectorre = /^#([\w-]+)$/; var classselectorre = /^\.([\w-]+)$/; var tagselectorre = /^[\w-]+$/; var translatere = /translate(?:3d)?\((.+?)\)/; var translatematrixre = /matrix(3d)?\((.+?)\)/; var $ = function(selector, context) { context = context || document; if (!selector) return wrap(); if (typeof selector === 'object') if ($.isarraylike(selector)) { return wrap($.slice.call(selector), null); } else { return wrap([selector], null); } if (typeof selector === 'function') return $.ready(selector); if (typeof selector === 'string') { try { selector = selector.trim(); if (idselectorre.test(selector)) { var found = document.getelementbyid(regexp.$1); return wrap(found ? [found] : []); } return wrap($.qsa(selector, context), selector); } catch (e) {} } return wrap(); }; var wrap = function(dom, selector) { dom = dom || []; object.setprototypeof(dom, $.fn); dom.selector = selector || ''; return dom; }; /** * queryselectorall * @param {type} selector * @param {type} context * @returns {array} */ $.qsa = function(selector, context) { context = context || document; return $.slice.call(classselectorre.test(selector) ? context.getelementsbyclassname(regexp.$1) : tagselectorre.test(selector) ? context.getelementsbytagname(selector) : context.queryselectorall(selector)); }; $.uuid = 0; $.data = {}; $.insertafter = function(elem,tarelem){ var parent = tarelem.parentnode; if (parent.lastchlid == tarelem) { parent.appendchild(elem); }else{ parent.insertbefore(elem,tarelem.nextsibling); } }; // 查找兄弟元素 $.getsiblings = function(o){ var a = []; var p = o.previoussibling; while(p){ if(p.nodetype === 1){ a.push(p); } p = p.previoussibling; } a.reverse(); var n = o.nextsibling; while(n){ if(n.nodetype === 1){ a.push(n); } n = n.nextsibling; } return a; }; $.toggleclass = function( elem, c ) { if(elem.classlist.contains(c)){ elem.classlist.remove(c); }else{ elem.classlist.add(c); } }; /* 移动端点击事件模拟pc端hover事件 * class1,选择匹配的元素 * class2,匹配元素里的a元素,阻止它跳转 * */ $.touchtohover = function (class1,class2) { [].slice.call(document.queryselectorall(class1)).foreach( function( el) { el.queryselector(class2).addeventlistener( 'touchstart', function(e) { console.log(this); //e.stoppropagation(); e.preventdefault(); }, false ); el.addeventlistener( 'touchstart', function(e) { $.toggleclass( this, 'cs-hover' ); }, false ); }); }; $.getstyle = function(elem,attr){ return elem.currentstyle ? elem.currentstyle[attr] : window.getcomputedstyle(elem,false)[attr]; }; $.getelemposition = function(elem){ var opositon = elem.getboundingclientrect(); return { top:opositon.top, bottom:opositon.bottom, left:opositon.left, right:opositon.right, }; }; $.event = { on:function(elem,type,handler){ if (elem.addeventlistener) { elem.addeventlistener(type,handler,false); }else if(elem.attachevent){ elem.attachevent('on'+type,handler); }else{ elem['on'+type] = handler; } }, off:function(elem,type,handler){ if (elem.removeeventlistener) { elem.removeeventlistener(type,handler,false); }else if (elem.detachevent) { elem.detachevent('on'+type,handler); }else{ elem['on'+type] = null; } }, getevent:function(event){ //将它放在事件处理程序的开头,可以确保获取事件。 return event ? event : window.event; }, gettarget:function(event){ //目标元素 return event.target || event.srcelement; }, preventdefault:function(event){ //取消默认 if (event.preventdefault) { event.preventdefault(); }else{ event.returnvalue = false; } }, stoppropagation:function(event){ //阻止冒泡 if (event.stoppropagation) { event.stoppropagation(); }else{ event.cancelbubble = true; } }, getrelatedtarget:function(event){//获得相关元素 if (event.relatedtarget) { return event.relatedtarget; }else if (event.toelement) { return event.toelement; }else if (event.fromelement) { return event.fromelement; }else{ return null; } }, getbutton:function(event){ //获取鼠标按钮 if (alan.issupported2) { return event.button; }else{ switch(event.button){ case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }, getwheeldelta:function(event){ //滚轮的事件 if (event.wheeldelta) { return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheeldelta : event.wheeldelta); }else{ return -event.detail * 40; } }, getcharcode:function(event){ if (typeof event.charcode == 'number') { return event.charcode; }else{ return event.keycode; } } }; /** * 在连续整数中取得一个随机数 * @param {number} * @param {number} * @param {string} 'star' || 'end' || 'both' 随机数包括starnum || endnum || both * @return 一个随机数 */ $.mathrandom = function(starnum,endnum,type){ var num = endnum - starnum; switch (type) { case 'star' : return parseint(math.random()*num + starnum,10); case 'end' : return math.floor(math.random()*num + starnum) + 1; case 'both' : return math.round(math.random()*num + starnum); default : console.log('没有指定随机数的范围'); } }; // 获得数组中最小值 $.getarraymin = function(array) { /*var min = array[0]; array.foreach(function (item) { if(item < min){ min = item; } }); return min;*/ return math.min.apply(math,array); }; // 获得数组中最大值 $.getarraymax = function (array) { return math.max.apply(math,array); }; // 数组去重复 $.getarraynorepeat = function (array) { var norepeat = []; var data = {}; array.foreach(function (item) { if(!data[item]){ norepeat.push(item); data[item] = true; } }); return norepeat; }; $.isarray = function(val){ return array.isarray(val) || object.prototype.tostring.call(val) === '[object array]'; }; $.isfunction = function(val){ return object.prototype.tostring.call(val) == '[object function]'; }; $.isregexp = function(val){ return object.prototype.tostring.call(val) == '[object regexp]'; }; $.ismacwebkit = (navigator.useragent.indexof("safari") !== -1 && navigator.useragent.indexof("version") !== -1); $.isfirefox = (navigator.useragent.indexof("firefox") !== -1); // $.fn = { each: function(callback) { [].every.call(this, function(el, idx) { return callback.call(el, idx, el) !== false; }); return this; } }; //兼容 amd 模块 if (typeof define === 'function' && define.amd) { define('alan', [], function() { return $; }); } return $; })(document); // 滚动动画 (function ($) { /* * 需要在css文件里添加 .scroll-animate.animated {visibility: hidden;} 样式,解决"闪一下"的bug * .disable-hover {pointer-events: none;} 也需要加在样式表中 * 如果滚动事件失效,查看body元素是否设置了 {height:100%},它会影响滚动事件。 * */ var scrollanimate = function (opt) { this.opt = opt || {}; this.classname = this.opt.classname || '.scroll-animate'; // 获取集合的class this.animateclass = this.opt.animateclass || 'animated'; // 动画依赖的class this.elem = document.queryselectorall(this.classname); // 需要滚动展示的元素 this.position = []; // 所有元素的offsettop距离数组 this.windowheight = ('innerheight' in window) ? window.innerheight : document.documentelement.clientheight; this.time = null; this.body = document.body; this.init(); }; scrollanimate.prototype = { getposition:function () { var self = this; self.position.length = 0; // 重置数组 [].slice.call(self.elem).foreach(function (elem) { if(elem.classlist.contains('father')){ var children = elem.queryselectorall(elem.getattribute('data-child')); var delay = parsefloat(elem.getattribute('data-delay')); [].slice.call(children).foreach(function (obj,index) { obj.classlist.add('animated'); obj.style.visibility = 'hidden'; if(obj.getattribute('data-delay')){ obj.style.animationdelay = obj.getattribute('data-delay') + 's'; }else{ obj.style.animationdelay = delay * index + 's'; } }) }else if(elem.classlist.contains('font-fadein')){ elem.style.visibility = 'hidden'; }else{ elem.classlist.add('animated'); } self.position.push(self.getoffsettop(elem)); }); }, getoffsettop:function(element){ var top; while (element.offsettop === void 0) { element = element.parentnode; } top = element.offsettop; while (element = element.offsetparent) { top += element.offsettop; } return top; }, scrollevent:function () { var self = this; self.body.classlist.add('disable-hover'); cleartimeout(self.time); self.time = settimeout(function () { self.body.classlist.remove('disable-hover'); },100); var scrolltop = window.pageyoffset || document.documentelement.scrolltop || document.body.scrolltop; self.position.foreach(function (item,index) { var currentelem = self.elem[index]; var effect = currentelem.getattribute('data-effect') || 'fadeinup'; var tclass = currentelem.getattribute('data-tclass') || 'go'; var flag = (scrolltop + self.windowheight >item) ? true : false; // 判断当前元素是否有father,得知将动画应用到当前元素还是当前元素到子元素。 if(currentelem.classlist.contains('father')){ var children = currentelem.queryselectorall(currentelem.getattribute('data-child')); if(flag){ [].slice.call(children).foreach(function (item) { if(item.style.visibility == 'hidden'){ item.style.visibility = 'visible'; // 判断是否为滚动数字效果的元素 // 数字滚动的效果,默认都放在father的容器里,因为这个效果一般都是多个同时出现。 if(item.classlist.contains('count-up')){ //self.countup(item,true); }else{ if(item.getattribute('data-effect')){ item.classlist.add(item.getattribute('data-effect')); }else{ item.classlist.add(effect); } } } }) }else{ [].slice.call(children).foreach(function (item) { if(item.style.visibility == 'visible'){ /*if(item.classlist.contains('count-up')){ self.countup(item,false); // 传入false,告诉函数清空计时器。 }*/ if(item.getattribute('data-effect')){ item.classlist.remove(item.getattribute('data-effect')); }else{ item.classlist.remove(effect); } item.style.visibility = 'hidden'; } }); } }else if(currentelem.classlist.contains('font-fadein')){ // 文字淡入到效果 if(flag && currentelem.style.visibility == 'hidden'){ self.fonteffect(currentelem); }else if(!flag && currentelem.style.visibility == 'visible'){ currentelem.style.visibility = 'hidden' } }else if(currentelem.classlist.contains('classgo')){ //滚动到位置添加动画类 if(flag){ currentelem.style.visibility = 'visible'; currentelem.classlist.add(tclass); }else{ if(currentelem.style.visibility == 'visible'){ currentelem.classlist.remove(tclass); currentelem.style.visibility = 'hidden'; } } }else{ if(flag){ currentelem.style.visibility = 'visible'; currentelem.classlist.add(effect); currentelem.style.animationdelay = currentelem.getattribute('data-delay') + 's'; }else{ if(currentelem.style.visibility == 'visible'){ currentelem.classlist.remove(effect); currentelem.style.visibility = 'hidden'; } } } }) }, countup:function (elem,istrue) { // 效果不理想,放弃了。 if(istrue){ elem.innerhtml = ''; var time = elem.getattribute('data-time'); var sum = elem.getattribute('data-text'); var speed = math.ceil(time / 100); var increment = math.round(sum / speed); var number = 1; elem.timer = setinterval(function () { if(number < sum){ number += increment; elem.innertext = number; }else{ elem.innertext = sum; clearinterval(elem.timer); } },100); console.log(speed); }else{ console.log('清空定时器'); clearinterval(elem.timer); } }, fonteffect:function (elem) { var array = elem.getattribute('data-text').split(''); var delay = elem.getattribute('data-delay'); var effect = elem.getattribute('data-effect') || 'fadein'; elem.innerhtml = ''; var fragment = document.createdocumentfragment(); array.foreach(function (item,i) { var span = document.createelement("font"); span.classname='animated'; span.classlist.add(effect); if(delay){ span.style.animationdelay = delay * i + 's'; }else{ span.style.animationdelay = 0.1 * i + 's'; } span.innertext = item; fragment.appendchild(span); }); elem.style.visibility = 'visible'; elem.appendchild(fragment); }, init:function () { var self = this; if(self.elem.length < 1){ console.log('滚动动画对象集合为零'); return; } self.scrollevent = self.scrollevent.bind(this); settimeout(function () { self.getposition(); // 获取每个元素的位置,存放在一个数组。 self.scrollevent(); var _scrollevent = throttlepro(self.scrollevent,100,300); document.addeventlistener('scroll',_scrollevent,false); // 改变窗口大小,重新初始化一些数据 window.onresize = function () { //console.log('resize the window'); throttle(function () { self.windowheight = ('innerheight' in window) ? window.innerheight : document.documentelement.clientheight; self.getposition(); self.scrollevent(); }) }; },0); } }; $.scrollanimate = scrollanimate; })(alan); // 函数截流 function throttle(method,context){ cleartimeout(method.tid); method.tid = settimeout(function(){ method.call(context); },500); } function throttlepro(fn, delay, mustrundelay){ var timer = null; var t_start; return function(){ var context = this, args = arguments, t_curr = +new date(); cleartimeout(timer); if(!t_start){ t_start = t_curr; } if(t_curr - t_start >= mustrundelay){ fn.apply(context, args); t_start = t_curr; } else { timer = settimeout(function(){ fn.apply(context, args); }, delay); } }; } //菜单添加激活条 (function($) { $.fn.lavalamp = function(o) { o = $.extend({ fx: "linear", speed: 500, click: function() {} }, o || {}); return this.each(function() { var b = $(this), noop = function() {}, $back = $('