www.gusucode.com > 叶子美容网图文下拉导航菜单源码程序 > 叶子美容网图文下拉导航菜单/js/ykms.js
/* * */ (function(){ function $(id,tag){ var re=(id&&typeof id!="string") ? id : document.getElementById(id); if(!tag){ return re; }else{ return re.getElementsByTagName(tag); } } function upper(m){ return m.replace(/^[a-z]/g,function(n){ return n.charAt(0).toUpperCase()}); } function tagSwitch(tit,box,s,fn,time,show){ tit=tit.split('/'); box=box.split("/"); !s&&(s="mouseover");!show&&(show=0); var ts=$(tit[0]), bs=$(box[0]), n=0, tx=tit[2], bx=box[2], now=-1,i,c, old=-1; ts = Element.getChild(ts,tit[1]); bs = Element.getChild(bs,box[1]); n=ts.length; for(i=0;i<n;i++){reg(ts[i],bs[i],i);}; function reg(tv,bv,i) { var timer = null; Element.removeClass(tv,'on'); Element.removeClass(bv,'on'); tv.old = tv.className || ''; bv.old = bv.className || ''; Event.add(tv,s,function(){ if(timer) return; timer = setTimeout(function(){ timer = null; clearInterval(c); init(i); },50); }); Event.add(tv,'mouseout',function(){ if(timer){ clearTimeout(timer); timer = null; } }) if(show!=-1&&time){ Event.add(bv,"mouseover",function(){clearInterval(c);}); Event.add(bv,"mouseout",go); Event.add(tv,"mouseout",function(){ if(timer){ clearTimeout(timer); timer = null; } go(); }); } else if(show==-1&&s=="mouseover"){ Event.add(tv,"mouseout",function(){init(0);}); } } init(0); if(show!=-1&&time){c=setInterval(auto,time);} function go(){clearInterval(c);c=setInterval(auto,time);} function init(m){ if(m==now) return; if(old>-1){ Element.removeClass(ts[old],'old'); Element.removeClass(bs[old],'old'); } if(now>-1){ Element.addClass(ts[now],'old'); Element.addClass(bs[now],'old'); Element.removeClass(ts[now],'on'); Element.removeClass(bs[now],'on'); old = now; } if(m>-1){ Element.addClass(ts[m],'on'); Element.addClass(bs[m],'on'); now = m; } fn&&fn(ts[m],bs[m],m); } function auto(){ var s = now; (s<n-1)?s++:s=0; init(s); }; } function inputFocus(id,defaultValue){ var obj = $(id), v = defaultValue; Event.add(obj,'focus',function(){ if(obj.value == v){ obj.value = ''; Element.addClass(obj,'on'); } }) Event.add(obj,'blur',function(){ if(obj.value == '' || obj.value == v){ obj.value = v; Element.removeClass(obj,'on'); } }) } function loadScript(url,callback,charset){ var script = document.createElement('script'); script.setAttribute('async',true); script.src = url; if(charset) script.charset = charset; script.readyState ? script.onreadystatechange = function(){ if(script.readyState == 'loaded' || script.readyState =='complete'){ setTimeout(function(){ if(callback) callback(); },100) } }: script.onload = function(){ if(callback) callback(); } document.getElementsByTagName('head')[0].appendChild(script); } function lazyLoad(id,tarid,type){ if(!id || !tarid) return; var obj = document.getElementById(id), tar = document.getElementById(tarid), n = 0, inner = '', div = document.createElement('div'); if(!obj || !tar) return; if(type){ obj.appendChild(tar); return; } /*n = tar.innerHTML.toLowerCase().indexOf('</script>') + 9;*/ inner = tar.innerHTML.replace(/\<script[^\>]{1,}(yokaafp7\.allyes\.com|yoka\.adsame\.com)[^\>]{1,}\>\<\/script\>/g,''); inner = inner.replace(/\<div\s{1,}adCount.*\<\/div\>/,''); div.innerHTML = inner; obj.appendChild(div); tar.innerHTML = ''; inner = null; } function menu(tit,con){ tit=tit.split('/'); con=con.split('/'); var ts = $(tit[0],tit[1]), cs = $(con[0],con[1]), box = $(con[0]), str = []; for(var i=0;i<ts.length;i++){ str.push(ts[i].parentNode.parentNode); }; for(var i=0;i<ts.length;i++){ obj(i); }; function obj(n){ Event.add(str[n],"mouseover",function(){ show(n); }); Event.add(cs[n],"mouseover",function(){ show(n); }); Event.add(str[n],"mouseout",function(){ hidden(n); }); Event.add(cs[n],"mouseout",function(){ hidden(n); }); }; function show(n){ var p = Element.getPosition(str[n]); box.style.cssText = "display:block;top:" + (p.y+str[n].offsetHeight) +"px;left:" + (p.x-30) +"px"; cs[n].style.display ="block"; }; function hidden(n){ box.style.cssText = ""; cs[n].style.display =""; }; } function autoWidthMove(data){ var obj = $(data.id), ctrl = $(data.ctrl), left = $(data.left), right = $(data.right), staus = false, span, cun, cur = 0, to, fn = null, time = data.time, anima = Anima(obj); obj.innerHTML += obj.innerHTML; var tag = Element.getChild(obj, data.tag), len = tag.length/2, movsize = -tag[0].offsetWidth, maxwidth = len * movsize; function init(){ var str = ""; for(var i=0;i<len; i++){ str += i == cur ? '<li class = "on"></li>':'<li></li>'; }; ctrl.innerHTML = str; span = $(ctrl, 'li'); for(var i=0;i<len;i++) { ctrlArea(i); }; auto(); }; function ctrlArea(num){ Event.add(span[num], 'click', function() { clear(); to = num * movsize; move(); setnum(num); }) }; function setnum(c){ if (cur == c) return; (c > len - 1) && (c = 0); (c < 0) && (c = len - 1); Element.addClass(span[c],"on"); Element.removeClass(span[cur],"on"); cur = c; }; function add(w){ if(staus) return; staus = true; cun = cur; if(w){ cun--; if(cun<0){ cun = len-1; obj.style.marginLeft = maxwidth + "px"; } }else{ cun++; if(cun==1){ obj.style.marginLeft = 0; } } to = cun * movsize; move(); setnum(cun); }; function move(){ anima.start({ marginLeft: to }); anima.complete(function(){ staus = false; auto(); }); }; function clear(){clearTimeout(fn);fn = null}; function auto(){clear(); if(time) fn = setTimeout(function(){add(false)}, time)}; Event.add(left, "click", function(){ add(true); }) Event.add(right, "click", function(){ add(false); }) Event.add(left, "mouseover", function(){ left.style.cssText = "opacity:1;filter:alpha(opacity=100)"; }); Event.add(right, "mouseover", function(){ right.style.cssText = "opacity:1;filter:alpha(opacity=100)"; }); Event.add(left, "mouseout", function(){ left.style.cssText = ""; }); Event.add(right, "mouseout", function(){ right.style.cssText = ""; }); Event.add(obj, "mouseover", clear); Event.add(obj, "mouseout", auto); init(); } function hovershow(id){ var ycId = $(id,"dd"); for(var i=0; i<ycId.length; i++){ obj(i) }; function obj(n){ Event.add(ycId[n].parentNode,"mouseover",function(){ ycId[n].style.display = "block"; }); Event.add(ycId[n].parentNode,"mouseout",function(){ ycId[n].style.display = "none"; }) } }; function setbtn(id,style){ var o = $(id); Event.add(o,"mouseover",function(){ Element.addClass(o,style); }); Event.add(o,"mouseout",function(){ Element.removeClass(o,style); }); } function setinput(id,style){ var o = $(id); Event.add(o,"focus",function(){ Element.addClass(o.parentNode,style); }); Event.add(o,"blur",function(){ Element.removeClass(o.parentNode,style); }); } function sun(id){ function addEvent(o,sty,fun){o.attachEvent?o.attachEvent("on"+sty,fun):o.addEventListener(sty,fun,false);}; var timer=null,objDt=$(id),span=$(objDt,"span")[0]; addEvent(objDt,"mouseover",show); addEvent(objDt,"mouseout",hide); function show(){clearTimer();span.className="on";} function hide(){clearTimer();timer=setTimeout(function(){span.className="";},50);} function clearTimer(){timer&&clearTimeout(timer);timer=null;} } function focus(id,time,callbackFun){ var obj = $(id), imgs = $(obj,'img'), dd = $(obj,'dd')[0], lis = null, current = 0, state = false, old = -1, time = time || 5000, autoTimer = null, lazyTimer = null, anima = [], moving = false, imgState = []; function init(){ var str = '<ul>'; for(var i=0,l=imgs.length;i<l;i++){ imgState[i] = false; changeState(i); str += '<li>'+ (i+1) +'</li>'; anima[i] = Anima(imgs[i]); } str += '</ul>'; dd.innerHTML = str; imgs[0].style.cssText += ';opacity:1;filter:alpha(opacity=100);display:block;z-index:2;'; handle(); Event.add(obj,'mouseover',function(){ clear(); }) Event.add(obj,'mouseout',function(){ play(); }) //play(); preLoad(0,play); if(callbackFun) callbackFun(0); } function preLoad(n,callback){ if(imgs[n].src == '' ) imgs[n].src = imgs[n].getAttribute('_src'); callback ? changeState(n,callback) : changeState(n); } function changeState(n,callback){ //imgState[n] = true; //if(callback) callback(); if(imgs[n].complete || imgs[n].readyState == 'loaded' || imgs[n].readyState == 'complete'){ imgState[n] = true; if(callback) callback(); }else{ Event.add(imgs[n],'load',function(){ imgState[n] = true; if(callback) callback(); Event.remove(imgs[n],'load',arguments.callee); }) Event.add(imgs[n],'error',function(){ imgState[n] = true; if(callback) callback(); Event.remove(imgs[n],'error',arguments.callee); }) } var m = n+1; if( m <= imgs.length-1 && !imgState[m]){ preLoad(m); } } function auto(){ var next = current; next++; if( next > imgs.length-1){ next = 0; } if(!imgState[next]){ clear(); if(imgs[next].src == ''){ preLoad(next,auto); return; } lazyTimer = setTimeout(function(){ lazyTimer = null; auto(); },300); return; } change(next); } function change(c){ moving = true; if(callbackFun) callbackFun(c); clear(); if(old>-1){ anima[old].cancel(); imgs[old].style.cssText = 'display:none'; } old = current; anima[old].cancel(); imgs[old].style.cssText += ';display:block;opacity:1;filter:alpha(opacity=100);z-index:1;'; Element.removeClass(lis[old],'on'); current = c; imgs[current].style.cssText += ';display:block;opacity:0;filter:alpha(opacity=0);z-index:2;'; Element.addClass(lis[current],'on'); anima[current].start({opacity:1}); anima[current].complete(function(){ moving = false; play(); }); } function handle(){ lis = $(dd,'li'); Element.addClass(lis[0],'on'); for(var i=0,l=lis.length;i<l;i++){ fun(i); } function fun(n){ Event.add(lis[n],'click',function(){ if(moving) return; if(n==current) return; if(imgs[n].src == '') imgs[n].src = imgs[n].getAttribute('_src'); change(n); }) } } function clear(){ clearTimeout(autoTimer); clearTimeout(lazyTimer); lazyTimer = null; autoTimer = null; } function play(){ clear(); autoTimer = setTimeout(auto,time); } init(); } function scroll(opt){ if(!opt) return; var obj = $(opt.id), box = Element.getChild(obj,opt.boxTag)[0], list = Element.getChild(box,opt.singleTag), loop = opt.loop ? true : false, leftBtn = opt.leftBtn ? $(opt.leftBtn) : null, rightBtn = opt.rightBtn ? $(opt.rightBtn) : null, auto = opt.auto ? true : false, c = opt.current ? parseInt(opt.current) : 0, path = opt.path ? opt.path : 'left', callback = opt.callback ? opt.callback : null, step = opt.step ? parseInt(opt.step) : 1, anima = null, singleSize = 0, length = list.length, max = 0, time = opt.time ? parseInt(opt.time) : 5000, state = false, from = 0, to = 0, fix =0, range = [0,0], move = null; function init(){ if(path == 'left' || path =='right'){ singleSize = list[0]['offsetWidth']; fix = Math.round(obj['offsetWidth']/singleSize); }else{ singleSize = list[0]['offsetHeight']; fix = Math.round(obj['offsetHeight']/singleSize); } fix = Math.max(1,fix); if(loop){ box.innerHTML += box.innerHTML; fix = 0; } path = (path == 'left' || path == 'right') ? 'marginLeft' : 'marginTop'; max = singleSize*length; anima = Anima(box,500); to = -step*singleSize; if(auto){ move = setTimeout(play,time); range = [0,length]; box.innerHTML += box.innerHTML; }else{ range = [0,length-fix]; } reset(c); if(callback) callback(c,range); handle(); } function handle(){ if(leftBtn){ Event.add(leftBtn,'click',function(){ change(); }) } if(rightBtn){ Event.add(rightBtn,'click',function(){ change(null,true); }) } Event.add(box,'mouseover',function(){ clear(); }) Event.add(box,'mouseout',function(){ if(auto){ move = setTimeout(play,time); } }) } function change(m,type){ clear(); if(m||m==0){ c = m; }else{ var n = type ? 1 : 0; if(state) return; if(n){ if(c >= range[1]){ if(!auto && !loop) return; reset(1-n); } c += step; }else{ if(c <= range[0]){ if(!auto && !loop) return; reset(1-n); } c -= step; } } to = -c*singleSize; state = true; var s = {}; s[path] = to; if(callback) callback(c,range); anima.start(s); anima.complete(function(){ state = false; if(auto || loop){ if (c== range[n]){ reset(1-n); } } if(auto){ move = setTimeout(play,time); } }) } function play(){ change(null,true); } function clear(){ clearTimeout(move); move = null; } function reset(n){ box.style[path] = -Math.abs(range[n]*singleSize) + 'px'; c = range[n]; } init(); function setChange(s){ return change(s); } return { setChange : setChange } } function dropMenu(id,tag,type){ var obj = $(id), menu = $(obj,tag)[0], timer = null, state = false, type = type || 'click'; if(!obj || !menu) return; Event.add(obj,type,function(e){ clear(); if(state && type == 'click'){ Element.removeClass(menu,'on'); state = false; return; } Element.addClass(menu,'on'); state = true; }) if(type == 'click'){ Event.add(obj,'mouseover',function(){ if(!state) return; clear(); Element.addClass(menu,'on'); state = true; }) } Event.add(obj,'mouseout',function(){ if(timer) return; timer = setTimeout(function(){ clear(); state = false; Element.removeClass(menu,'on'); },100) }) function clear(){ if(timer){ clearTimeout(timer); timer = null; } } } window['yo'] = { 'tagSwitch' : tagSwitch, 'inputFocus' : inputFocus, 'loadScript' : loadScript, 'lazyLoad' : lazyLoad, 'menu':menu, 'autoWidthMove':autoWidthMove, 'hovershow' : hovershow, 'setbtn' : setbtn, 'setinput' : setinput, 'sun' : sun, 'scroll' : scroll, 'dropMenu' : dropMenu, 'focus' : focus } })();