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
	}
	
})();