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 mainf = function(selector, context) { context = context || document; if (!selector) return wrap(); if (typeof selector === 'object') if (mainf.isarraylike(selector)) { return wrap(mainf.slice.call(selector), null); } else { return wrap([selector], null); } if (typeof selector === 'function') return mainf.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(mainf.qsa(selector, context), selector); } catch (e) {} } return wrap(); }; var wrap = function(dom, selector) { dom = dom || []; object.setprototypeof(dom, mainf.fn); dom.selector = selector || ''; return dom; }; /** * queryselectorall * @param {type} selector * @param {type} context * @returns {array} */ mainf.qsa = function(selector, context) { context = context || document; return mainf.slice.call(classselectorre.test(selector) ? context.getelementsbyclassname(regexp.$1) : tagselectorre.test(selector) ? context.getelementsbytagname(selector) : context.queryselectorall(selector)); }; mainf.uuid = 0; mainf.data = {}; mainf.insertafter = function(elem,tarelem){ var parent = tarelem.parentnode; if (parent.lastchlid == tarelem) { parent.appendchild(elem); }else{ parent.insertbefore(elem,tarelem.nextsibling); } }; // 查找兄弟元素 mainf.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; }; mainf.toggleclass = function( elem, c ) { if(elem.classlist.contains(c)){ elem.classlist.remove(c); }else{ elem.classlist.add(c); } }; /* 移动端点击事件模拟pc端hover事件 * class1,选择匹配的元素 * class2,匹配元素里的a元素,阻止它跳转 * */ mainf.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) { mainf.toggleclass( this, 'cs-hover' ); }, false ); }); }; mainf.getstyle = function(elem,attr){ return elem.currentstyle ? elem.currentstyle[attr] : window.getcomputedstyle(elem,false)[attr]; }; mainf.getelemposition = function(elem){ var opositon = elem.getboundingclientrect(); return { top:opositon.top, bottom:opositon.bottom, left:opositon.left, right:opositon.right, }; }; mainf.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 一个随机数 */ mainf.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('没有指定随机数的范围'); } }; // 获得数组中最小值 mainf.getarraymin = function(array) { /*var min = array[0]; array.foreach(function (item) { if(item < min){ min = item; } }); return min;*/ return math.min.apply(math,array); }; // 获得数组中最大值 mainf.getarraymax = function (array) { return math.max.apply(math,array); }; // 数组去重复 mainf.getarraynorepeat = function (array) { var norepeat = []; var data = {}; array.foreach(function (item) { if(!data[item]){ norepeat.push(item); data[item] = true; } }); return norepeat; }; mainf.isarray = function(val){ return array.isarray(val) || object.prototype.tostring.call(val) === '[object array]'; }; mainf.isfunction = function(val){ return object.prototype.tostring.call(val) == '[object function]'; }; mainf.isregexp = function(val){ return object.prototype.tostring.call(val) == '[object regexp]'; }; mainf.ismacwebkit = (navigator.useragent.indexof("safari") !== -1 && navigator.useragent.indexof("version") !== -1); mainf.isfirefox = (navigator.useragent.indexof("firefox") !== -1); // mainf.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 mainf; }); } return mainf; })(document); // 滚动动画 (function (mainf) { var scrollanimate = function (opt) { this.opt = opt || {}; this.classname = this.opt.classname || '.lv-ani'; // 获取集合的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 if(elem.classlist.contains('classgo')){ elem.style.visibility = 'auto'; }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.classlist.add(tclass); }else{ if(currentelem.classlist.contains('go')){ currentelem.classlist.remove(tclass); } } }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 condition = ''; if (elem.getattribute('data-word') == 1){ condition = ' '; } var array = elem.getattribute('data-text').split(''); var delay = elem.getattribute('data-delay'); var effect = elem.getattribute('data-effect') || 'fadein'; var thisi=0; if ($(elem).parents('.lv-text').length != 0){ // console.log($(elem).index()); thisi = $(elem).index() } 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); } }; mainf.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 ($) { var marqueen = function (opt) { this.opt = opt || {}; this.elem = document.queryselector(this.opt.classname); this.speed = this.opt.speed || 20; this.isstep = this.opt.isstep; this.ul = this.elem.queryselector('ul'); this.liheight = this.elem.queryselector('li').offsetheight; this.ulheight = this.ul.offsetheight * -1; this.y = 0; this.interval = null; this.timeout = null; this.reg=/\-?[0-9]+/g; //this.reg2=/\-?[0-9]+\.?[0-9]*/g; //可能包含小数点的 this.init(); }; marqueen.prototype = { move:function () { var self = this; self.y --; self.ul.style.webkittransform='translatey('+self.y+'px)'; var nowy = self.ul.style.webkittransform.match(self.reg)[0]; if(self.isstep && ((-nowy) % (-self.liheight) ===0)){ clearinterval(self.interval); self.interval = null; self.timeout = settimeout(function(){ self.interval = setinterval(self.move,self.speed); },2000); } if(nowy == self.ulheight){ self.y = 0; self.ul.style.transform='translatey(0px)'; } }, init:function () { var self = this; self.move = self.move.bind(self); self.ul.innerhtml += self.ul.innerhtml; self.interval = setinterval(self.move,self.speed); self.elem.onmouseover = function(){ clearinterval(self.interval); self.interval = null; cleartimeout(self.timeout); }; self.elem.onmouseout = function(){ if(self.interval == null){ self.interval = setinterval(self.move,self.speed) } }; } }; $.marqueen = marqueen; })(alan); // 自定义滚动条 (function($){ function scrollbar(opt){ this.opt = opt || {}; this.scrollbox = document.getelementsbyclassname(this.opt.elem)[0]; this.scrollbar = this.scrollbox.getelementsbyclassname('scroll-bar')[0]; this.scrollbtn = this.scrollbox.getelementsbyclassname('scroll-btn')[0]; this.scrollcon = this.scrollbox.getelementsbyclassname('scroll-con')[0]; this.scrollbtnheight = this.scrollbtn.offsetheight; // 按钮的高度 this.scrollboxheight = this.scrollbox.offsetheight; // 容器的高度 this.scrollbarheight = this.scrollboxheight; // 滚动条的高度 this.scrollconheight = this.scrollcon.scrollheight - this.scrollboxheight; // 文章可以滚动内容高度 this.maxdis = this.scrollbarheight - this.scrollbtnheight; // 可拖动最大距离 this.scrollbarposition = this.scrollbar.getboundingclientrect().top; // 滚动条基于文档的y距离 this.mouseclickposition; // 鼠标点击在按钮的距离 this.init(); } scrollbar.prototype = { scrolltop:function(dis){ var self = this; var _scrolltop = dis * self.scrollconheight / self.maxdis; self.scrollcon.scrolltop = _scrolltop; }, atuomovebtn:function(scrolltop){ var self = this; var _movey = scrolltop * self.maxdis / self.scrollconheight; self.scrollbtn.style.top = _movey + 'px'; }, mousemoveevent:function(event){ var self = this; var dis = event.clienty - self.scrollbarposition - self.mouseclickposition; // 限制范围 dis > self.maxdis && (dis = self.maxdis); dis < 0 && (dis = 0); self.scrollbtn.style.top = dis + 'px'; self.scrolltop(dis); }, mouseupevent:function(event){ var self = this; self.scrollcon.classlist.remove('scrolling'); document.removeeventlistener('mousemove',self._moveevent,false); document.removeeventlistener('mouseup',self._upevent,false); }, wheelevent:function(event){ var self = this; var e = event || window.event; var deltay = e.deltay * -30 || // wheel 事件 e.wheeldeltay/4 || // mousewheel 事件 chrome (e.wheeldeltay === undefined && // 如果没有2d属性 e.wheeldelta/4) || // 那么就用1d的滚轮属性 e.detail * -10 || // firefox的dommousescroll事件 0 ; // 属性未定义 if ($.ismacwebkit) { deltay /= 30; } if ($.isfirefox && e.type !== "dommousescroll") { self.scrollcon.removeeventlistener('dommousescroll',self._wheelevent,false); } if(!e.ctrlkey){ if(deltay > 0){ //console.log(deltay); self.scrollcon.scrolltop -= 20; }else{ self.scrollcon.scrolltop += 20; } self.atuomovebtn(self.scrollcon.scrolltop); } e.preventdefault(); e.stoppropagation(); }, init:function(){ this._moveevent = this.mousemoveevent.bind(this); this._upevent = this.mouseupevent.bind(this); this._wheelevent = this.wheelevent.bind(this); var self = this; // 拖动滚轮的事件 self.scrollbtn.onmousedown = function(event){ var e = event || window.event; // 每次点击都获取一次按钮位置,以得到鼠标与按钮顶部的距离 var scrollbtnposition = this.offsettop; self.mouseclickposition = e.clienty - self.scrollbarposition - scrollbtnposition; self.scrollcon.classlist.add('scrolling'); // 防止拖动的时候选中文字 document.addeventlistener('mousemove',self._moveevent,false); document.addeventlistener('mouseup',self._upevent,false); }; // 滚动内容的事件 self.scrollcon.addeventlistener('mousewheel',self._wheelevent,false); // firefox if ($.isfirefox) { self.scrollcon.addeventlistener('dommousescroll',self._wheelevent,false); } } }; $.scrollbar = scrollbar; })(alan); function isweixin() { var ua = window.navigator.useragent.tolowercase(); if(ua.match(/micromessenger/i) == 'micromessenger') { return true; } else { return false; } } $(function () { settimeout(function () { $('font').each(function () { let text = $(this).text(); if (text == ' '){ $(this).text(''); } }) },10) });