function searchcheck(inputid) { const value = document.getelementbyid(inputid).value if (value != null && $.trim(value) !== '' ) { return true } return false } function buildsearch() { const form = $("#search") form.find('svg').on('click', function() { form.submit() }) const mform = $("#m-search") mform.find('svg').on('click', function() { mform.submit() }) } function initnavbar() { const items = $('#navbar').children('.nav-item') items.each(function(index) { const nav = items.eq(index) const dropdown = nav.children('.dropdown-menu') if (dropdown.length === 1) { nav.hover( function() { dropdown.addclass('show') }, function() { dropdown.removeclass('show') } ) } }) } function buildblogroll() { const fn = function(link) { if (link) { window.open(link) } } $.each([ 'blogroll-select-1', 'blogroll-select-2', 'blogroll-select-3' ], function(index, id) { const dom = document.getelementbyid(id) if (dom) { dom.addeventlistener('change', function(event) { fn(dom.value) }) } }) } $(function() { buildsearch() initnavbar() buildblogroll() }) function rollinglist(id) { const rolling = $('#' + id) const body = rolling.children('div') if (body.get(0) == null) { return null } let stopanimate = null let proceedanimate = null rolling.hover(function() { stopanimate && stopanimate() }, function() { proceedanimate && proceedanimate() }) function initpcmodel() { body.children('.clone-node').remove() let sumwidth = body.get(0).clientwidth const items = body.children('.rolling-item') items.each(function(index) { const item = items.eq(index) const dom = item.get(0) const clonedom = dom.clonenode(true) clonedom.classlist.add("clone-node") body.append(clonedom) }) let time = items.length * 5000 let starttime = 0 let left = 0 stopanimate = function() { left = body.css('left') time = time - (date.now() - starttime) body.stop() } proceedanimate = function() { if (window.ispc) { pcanimate() } } function pcanimate() { starttime = date.now() body.css({ top: 0, left: left }).animate({ left: (0 - sumwidth) + 'px' }, time, 'linear', function() { if (window.ispc) { starttime = date.now() time = items.length * 5000 left = 0 pcanimate() } }) } pcanimate() } function initmobilemodel() { body.children('.clone-node').remove() let sumheight = body.get(0).clientheight const items = body.children('.rolling-item') items.each(function(index) { const item = items.eq(index) const dom = item.get(0) const clonedom = dom.clonenode(true) clonedom.classlist.add("clone-node") body.append(clonedom) }) let time = items.length * 5000 let starttime = 0 let top = 0 stopanimate = function() { top = body.css('top') time = time - (date.now() - starttime) body.stop() } proceedanimate = function() { if (window.ismobile) { mobileanimate() } } function mobileanimate() { starttime = date.now() body.css({ top: top, left: 0 }).animate({ top: (0 - sumheight) + 'px' }, time, 'linear', function() { if (window.ismobile) { starttime = date.now() time = items.length * 5000 top = 0 mobileanimate() } }) } mobileanimate() } function init() { if (window.ispc) { initpcmodel() } if (window.ismobile) { initmobilemodel() } } document.addeventlistener('displaymodechange', function() { body.stop() settimeout(function() { init() }, 200) }) init() } /** * tab面板 */ function tabs(id) { const tab = $('#' + id) const navs = tab.children('.tabs-nav').children('.nav') const morebtn = tab.children('.tabs-nav').children('.more-buttons').children('a') const fmorebtn = tab.children('.tabs-footer').children('a') const panes = tab.children('.tabs-body').children('.tab-pane') let currentindex = 0 navs.eq(currentindex).addclass('active') morebtn.eq(currentindex).addclass('active') fmorebtn.eq(currentindex).addclass('active') panes.eq(currentindex).css({ transform: 'translatey(0) translatex(0)' }) function switchtotarget(index) { if (index === currentindex) { return; } let d if (index < currentindex) { d = 'left' } else { d = 'right' } shiftoutanimation(panes.eq(currentindex).get(0), d) shiftinanimation(panes.eq(index).get(0), d) navs.eq(currentindex).removeclass('active') morebtn.eq(currentindex).removeclass('active') fmorebtn.eq(currentindex).removeclass('active') navs.eq(index).addclass('active') morebtn.eq(index).addclass('active') fmorebtn.eq(index).addclass('active') currentindex = index } navs.each(function(index) { navs.eq(index).on('click', function() { switchtotarget(index) }) }) } /** * 滑动器 * @param {array>} inners 滑动内容 * @param {array<$>} control * @param {'h' | 'v' | function} direction 方向 */ function swiper(inners, control, direction) { if (direction == null || direction === '') { direction = 'h' } let tempid = null let currentindex = 0 let maxindex = 1 let outanimation = null let inanimation = null function start() { if (tempid) { clearinterval(tempid) } tempid = setinterval(function() { switchtotarget(currentindex + 1) }, 3000) } function switchtotarget(index) { if (outanimation != null || inanimation != null) { return } if (index === currentindex) { return; } if (index > maxindex) { index = 0 } if (index < 0) { index = maxindex } let d switch (direction instanceof function ? direction() : direction) { case 'v': if (index < currentindex) { d = 'top' } else { d = 'bottom' } break default: { if (index < currentindex) { d = 'left' } else { d = 'right' } } } inners.foreach(function(inner) { outanimation = shiftoutanimation(inner.eq(currentindex).get(0), d) if (outanimation != null) { outanimation.addeventlistener('finish', function() { outanimation = null }) } inanimation = shiftinanimation(inner.eq(index).get(0), d) if (inanimation != null) { inanimation.addeventlistener('finish', function() { inanimation = null }) } }) control.eq(currentindex).removeclass('active') control.eq(index).addclass('active') currentindex = index } function stop() { if (tempid) { clearinterval(tempid) } } function init() { $("#banner-generic").hover(function() { stop() }, function() { start() }) maxindex = inners[0].length - 1 inners.foreach(function(inner) { inner.eq(currentindex).css({ transform: 'translatey(0) translatex(0)' }) inner.each(function(index) { inner.eq(index).on('swipeleft', function() { if (window.ismobile) { switchtotarget(currentindex + 1) } }).on('swiperight', function() { if (window.ismobile) { switchtotarget(currentindex - 1) } }) }) }) control.eq(currentindex).addclass('active') control.each(function(index) { control.eq(index).on('click', function() { switchtotarget(index) stop() start() }) }) start() } init() } /** * 移出动画 * @param {element} el 要移出的元素 * @param {'left' | 'right' | 'top' | 'bottom'} direction 移出方向 * @return {animation} */ function shiftoutanimation(el, direction) { if (el == null) { return null } let x, y switch (direction) { case "left": x = '100%' y = 0 break case "right": x = '-100%' y = 0 break case "bottom": x = 0 y = '-100%' break case "top": x = 0 y = '100%' break default: x = '100%' y = 0 } el.style.transform = 'translatex(0) translatey(0)' if (el.animate) { return el.animate([ {transform: 'translatex(0) translatey(0)'}, {transform: 'translatex(' + x + ') translatey(' + y + ')'} ], { delay: 1, duration: 500, fill: 'forwards', iterations: 1, easing: 'ease-in' }) } else { const handlers = {} const animateobject = { handlers: {}, addeventlistener: function(type, handler) { if (handlers[type] == null) { handlers[type] = [] } handlers[type].push(handler) }, emit: function(type) { if (handlers[type] != null) { handlers[type].foreach(function(handler) { handler() }) } } } $(el).css({ transform: 'translatex(0) translatey(0)', left: 0, top: 0 }).animate({left: x, top: y }, 500, function() { animateobject.emit('finish') }) return animateobject } } /** * 移入动画 * @param {element} el 要移入的元素 * @param {'left' | 'right' | 'top' | 'bottom'} direction 移入方向 * @return {animation} */ function shiftinanimation(el, direction) { if (el == null) { return null } let x, y switch (direction) { case "left": x = '-100%' y = 0 break case "right": x = '100%' y = 0 break case "bottom": x = 0 y = '100%' break case "top": x = 0 y = '-100%' break default: x = '100%' y = 0 } el.style.transform = 'translatex(' + x + ') translatey(' + y + ')' if (el.animate) { return el.animate([ {transform: 'translatex(' + x + ') translatey(' + y + ')'}, {transform: 'translatex(0) translatey(0)'} ], { delay: 1, duration: 500, fill: 'forwards', iterations: 1, easing: 'ease-in' }) } else { const handlers = {} const animateobject = { handlers: {}, addeventlistener: function(type, handler) { if (handlers[type] == null) { handlers[type] = [] } handlers[type].push(handler) }, emit: function(type) { if (handlers[type] != null) { handlers[type].foreach(function(handler) { handler() }) } } } $(el).css({ transform: 'translatex(0) translatey(0)', left: x, top: y }).animate({left: 0, top: 0 }, 500, function() { animateobject.emit('finish') }) return animateobject } } /** * 返回到顶部 */ function backtotop() { document.body.scrollintoview({block: 'start', behavior: 'smooth'}) }