20131211原生js代码

window.onload=function() {
	nav();
	search();
	banner();
	var p1=new Tab('btnList');
	p1.init();
	var fn=new Servi('servi');
	fn.fnOver();
	fn.fnOut();
	about();
	new Tab2();
	contactLForm();
	scrollTop();
};

	//nav导航
	function nav() {
		var oUl=getByClass('nav')[0];
		var aLi=oUl.getElementsByTagName('li');
		var oHeader=document.getElementById('header');
		var oColTitBar=document.getElementById('colTitBar');
		var oColTitBar2=document.getElementById('colTitBar2');
		var oColTitBar3=document.getElementById('colTitBar3');
		var oContact=document.getElementById('Contact');
		var arr=[pos(oHeader).top,pos(oColTitBar).top,pos(oColTitBar2).top,pos(oColTitBar3).top,pos(oContact).top]
		var iCur = 0;
		var iSpeed = 0;
		var iTimer = null;
		var iBtn = false;
		var num=0;
		(function() {	//初始第一个背景
			aLi[0].style.background='#fd8200';
			aLi[0].s=true;
		})();
		for(var i=0;i<aLi.length;i++) {
			aLi[i].onmouseover=function() {
				if(!this.s) { 
				this.style.background='#fd8200'	
				}
			};
			aLi[i].onmouseout=function() {
				if(!this.s){
					this.style.background='';
				}
			};
			aLi[i].index=i;
			aLi[i].onclick=function() {
				num=this.index;
				for(var i=0;i<aLi.length;i++) {
					aLi[i].style.background='';	
					aLi[i].s='';
				}
				this.style.background='#fd8200';
				this.s=true;
				window.onscroll = function() {
					if (iBtn == false) {
						clearInterval(iTimer);
					}
					iBtn = false;
				};
				clearInterval(iTimer);
				iTimer = setInterval(function() {
					iCur = document.documentElement.scrollTop || document.body.scrollTop;
					iSpeed = Math.floor((arr[num] - iCur) / 5);
					if (iCur == arr[num]) {
						clearInterval(iTimer);
					} else {
						document.documentElement.scrollTop = document.body.scrollTop = iCur+iSpeed;
					}
					iBtn = true;
				}, 30);
			};
		}
		document.onmousewheel=fnMouse;	//滚轮事件
		if (document.addEventListener) {
		document.addEventListener('DOMMouseScroll', fnMouse, false);
		}
		function fnMouse() {
			for(var i=0;i<arr.length;i++) {
				aLi[i].style.background='';
				if(scrollY()>=arr[i] && scrollY()<arr[i+1]) {
					aLi[i].style.background='#fd8200';
				};
				if(scrollY()>=arr[arr.length-1]) {
					aLi[arr.length-1].style.background='#fd8200';	
				};
			}
		};
	};

	//search
	function search() {
		var oSear=getByClass('search')[0];
		var oForm=oSear.getElementsByTagName('form')[0];
		var oBtn=oSear.getElementsByTagName('a')[0];
		var iBtn=true;
		oBtn.onclick=function() {
			if(iBtn) {
				oForm.style.display='block';
				var ih=oForm.offsetHeight;
				oForm.style.height=0;
				startMove(oForm,{
					height : 30
				},8)
				iBtn=false;
			}else {
				startMove(oForm,{
					height :0	
				},8,function() {
					oForm.style.display='none';
					iBtn=true;	
				})
			}
		}
	};

	//banner
	function banner() {

		var oBan=document.getElementById('banner');
		var oBtnL=document.getElementById('btnL');
		var oBtnR=document.getElementById('btnR');
		var oUl=document.getElementById('banList');
		var aLi=oUl.getElementsByTagName('li');
		var iLeft=oBtnL.offsetLeft;
		var iWidth=viewW();
		var num=0;
		var iBtn=true;
		var oPicBoxL=getByClass('picBoxL')[0];
		var oPicBoxR=getByClass('picBoxR')[0];
		oBan.onmouseover=function() {
			startMove(oBtnL,{
				left :0
			},8)
			startMove(oBtnR,{
				right :0
			},8)	
		}
		oBan.onmouseout=function() {
			startMove(oBtnL,{
				left :iLeft
			},8)
			startMove(oBtnR,{
				right :-52
			},8)	
		}
		oUl.style.width=iWidth*3+'px';
		for(var i=0;i<aLi.length;i++) {
			aLi[i].style.width=oUl.offsetWidth/3+'px';
		};

		$('#btnL').on('click',function() {
			if(!iBtn) return;
			iBtn=false;
			num++
			$('.picBoxL').eq(num).css('left',aLi[0].offsetWidth)
			$('.picBoxR').eq(num).css('left',aLi[0].offsetWidth)
			$('#banList').animate({
				left : -num*aLi[0].offsetWidth
			},1200,function() {
							if(num==aLi.length-1) {
								$(aLi[0]).css('left',$('#banList').width())
								$('.picBoxL').eq(0).css('left',aLi[0].offsetWidth);
								$('.picBoxR').eq(0).css('left',aLi[0].offsetWidth);	
							};
							if(num==aLi.length) {
								num=0;
								$('#banList').css('left',0);

								$(aLi[0]).css('left',0);

								$('.picBoxL').eq(0).animate({
										left :0
								},500);
								$('.picBoxR').eq(0).animate({
										left :0
								},1000);
							};
						iBtn=true;
				});
			$('.picBoxL').eq(num-1).animate({
				left : -num*aLi[0].offsetWidth
			},300,function() {
				$('.picBoxL').eq(num-1).animate({
					left : 0
				},1200);

				$('.picBoxL').eq(num).animate({
					left : 0
				},1200)
			})
			$('.picBoxR').eq(num-1).animate({
				left : -num*aLi[0].offsetWidth
			},500,function() {
					$('.picBoxR').eq(num-1).animate({
						left : 0
					},1200);
					$('.picBoxR').eq(num).animate({
						left :  0
					},1200);
			})	
		});
		$('#btnR').on('click',function() {
			if(!iBtn) return;
			iBtn=false;

			if(num==0) {
				num=aLi.length;
				$('#banList').css('left',-$('#banList').width())
				$(aLi[0]).css('left',$('#banList').width())

			}
			num--	
			$('.picBoxL').eq(num+1).css('left',aLi[0].offsetWidth)	//初始位置
			$('.picBoxR').eq(num+1).css('left',aLi[0].offsetWidth)

			$('#banList').animate({
				left : -num*aLi[0].offsetWidth
			},600,function(){
				if(num<aLi.length-1) {
					$(aLi[0]).css('left',0)
				$('.picBoxL').eq(0).css('left',-aLi[0].offsetWidth);
				$('.picBoxR').eq(0).css('left',-aLi[0].offsetWidth);

				}
				iBtn=true;	
			});

			$('.picBoxL').eq(num).animate({
				left : -num*aLi[0].offsetWidth
			},600,function() {
				$('.picBoxL').eq(num).animate({
					left : 0
				},600);

				$('.picBoxL').eq(num+1).animate({
					left : 0
				},600)
			})
			$('.picBoxR').eq(num).animate({
				left : -num*aLi[0].offsetWidth
			},300,function() {
					$('.picBoxR').eq(num).animate({
						left : 0
					},600);
					$('.picBoxR').eq(num+1).animate({
						left :  0
					},600);
			})	
		});
	};

	//Tab面向对象写法
	function Tab(id) {
		this.oBtnList=document.getElementById(id);
		this.aBtn=this.oBtnList.getElementsByTagName('a');
		this.oConList=document.getElementById('conList');
		this.aUl=this.oConList.getElementsByTagName('ul');
		this.num=0;
	}
	Tab.prototype.init=function() {
		conListUl(this.num);	//传参num对应相应的Ul
		var This=this;
		this.aBtn[0].style.background='#fd8200';	//初始化第一个aBtn的状态
		this.aBtn[0].style.color='#fff';
		for( var i=0;i<this.aBtn.length;i++) {
			this.aBtn[i].index=i;
			this.aBtn[i].onclick=function() {
				This.num=this.index
				This.fnClick();
			}
			this.aBtn[i].onmouseover=function() {
				This.num=this.index
				This.fnMouse();
			}
			this.aBtn[i].onmouseout=function() {
				This.fnOut();
			}
		}
	}
	Tab.prototype.fnClick=function() {
		for( var i=0;i<this.aBtn.length;i++) {
				this.aUl[i].style.display='none';
				this.aBtn[i].style.background='';
				this.aBtn[i].style.color='#000';
				this.aBtn[i].s='';
		}
		this.aBtn[this.num].style.background='#fd8200';
		this.aBtn[this.num].style.color='#fff';
		this.aUl[this.num].style.display='block';
		this.aBtn[this.num].s=true;
		conListUl(this.num);	
	}
	Tab.prototype.fnMouse=function() {
		if(!this.aBtn[this.num].s) {
			this.aBtn[this.num].style.color='#fff';
			}	
	}
	Tab.prototype.fnOut=function() {
		if(!this.aBtn[this.num].s) {
			this.aBtn[this.num].style.color='#000';
			}	
	};

	//tab普通写法
	/*function btnList () {
		var oBtnList=document.getElementById('btnList');
		var aBtn=oBtnList.getElementsByTagName('a');
		var oConList=document.getElementById('conList');
		var aUl=oConList.getElementsByTagName('ul');
		for( var i=0;i<aBtn.length;i++) {
			aBtn[i].index=i;
			aBtn[i].onclick=function() {

				for( var i=0;i<aBtn.length;i++) {
						aUl[i].style.display='none';
						aBtn[i].style.background='';
						aBtn[i].style.color='#000';
						aBtn[i].s='';
				}
				this.style.background='#fd8200';
				this.style.color='#fff';
				aUl[this.index].style.display='block';
				this.s=true;
			}
			aBtn[i].onmouseover=function() {
				if(!this.s) {
				this.style.color='#fff';
				}

			}
			aBtn[i].onmouseout=function() {
				if(!this.s) {
				this.style.color='#000';
				//this.style.background='';
				}
			}
		}

	}*/	

	//conList里li
	function conListUl(num) {
		var oConList=document.getElementById('conList');	
		var oUl=oConList.getElementsByTagName('ul')[num];
		var aLi=oUl.getElementsByTagName('li');
		var aH2=oUl.getElementsByTagName('h2');
		for(var i=0;i<aH2.length;i++) {	  //初始所有的h2高度为0
			aH2[i].style.height=0;	
		};
		for(var i=0;i<aLi.length;i++) {
			aLi[i].onmouseover=function() {
				var oH2=this.getElementsByTagName('h2')[0];
				oH2.style.display='block';
				oH2.style.paddingTop='10px';
				oH2.style.paddingBottom='10px';
				//oH2.style.height=0;	此处不能设置否则出bug
				startMove(oH2,{
					height : 35	
				},8)

			};
			aLi[i].onmouseout=function() {
				var oH2=this.getElementsByTagName('h2')[0];
				startMove(oH2,{
					height : 0,
					paddingTop:0,
					paddingBottom:0	
				},5,function() {
					oH2.style.display='none';
				})	
			};
		}
	};

	//servi 面向对象
	function Servi(id) {
		this.oServi=document.getElementById(id);
		this.aLi=this.oServi.getElementsByTagName('li');
		var This=this;
		this.num=0;
		for(var i=0;i<this.aLi.length;i++) {
			this.aLi[i].index=i;
			this.aLi[i].onmouseover=function() {
				This.num=this.index;
				This.fnOver();
			};
			this.aLi[i].onmouseout=function() {
				This.num=this.index;
				This.fnOut();
			};
		}
	};
	Servi.prototype.fnOver=function() {
		this.oPicL=getByClass('picL')[this.num];
		this.oPicR=getByClass('picR')[this.num];
		this.oServiBg=getByClass('serviBg')[this.num];

		startMove(this.oPicL,{
			left : -this.aLi[0].offsetWidth+40
		},6);
		startMove(this.oPicR,{
			left : 0
		},6);
		startMove(this.oServiBg,{
			opacity : 100
		},8)

	}
	Servi.prototype.fnOut=function() {
		this.oPicL=getByClass('picL')[this.num];
		this.oPicR=getByClass('picR')[this.num];
		this.oServiBg=getByClass('serviBg')[this.num];
		startMove(this.oPicL,{
			left : 0
		},6)
		startMove(this.oPicR,{
			left : -this.aLi[0].offsetWidth+20
		},6)
		startMove(this.oServiBg,{
			opacity : 0
		},8)
	};

	//servi普通写法
	/*function servi() {
		var oServi=document.getElementById('servi');
		var aLi=oServi.getElementsByTagName('li');

		var num=0;
		for(var i=0;i<aLi.length;i++) {
			aLi[i].index=i;
			aLi[i].onmouseover=function() {
				num=this.index;
				var oPicL=getByClass('picL')[num];
				var oPicR=getByClass('picR')[num];
				var oServiBg=getByClass('serviBg')[num];

				startMove(oPicL,{
					left : -aLi[0].offsetWidth+40
				},6);
				startMove(oPicR,{
					left : 0
				},6);
				startMove(oServiBg,{
					opacity : 100
				},8)
			};
			aLi[i].onmouseout=function() {
				num=this.index;
				var oPicL=getByClass('picL')[num];
				var oPicR=getByClass('picR')[num];
				var oServiBg=getByClass('serviBg')[num];
				startMove(oPicL,{
					left : 0
				},6)
				startMove(oPicR,{
					left : -aLi[0].offsetWidth+20
				},6)
				startMove(oServiBg,{
					opacity : 0
				},8)
			};
		}

	}*/

	//about
	function about() {

		var oAbout=document.getElementById('about');
		var aLi=oAbout.getElementsByTagName('li');
		var num=0;
		for(var i=0;i<aLi.length;i++) {
			aLi[i].index=i;
			aLi[i].onmouseover=function() {
				//alert('a')
				num=this.index;
				var oSpan=this.getElementsByTagName('span')[0];
				startMove(oSpan,{
					opacity : 70
				},6)	
			};
			aLi[i].onmouseout=function() {
				//num=this.index;
				var oSpan=this.getElementsByTagName('span')[0];
				startMove(oSpan,{
					opacity : 0
				},6)	
			}
		}
	};

	//aboutBtn面向对象写法
	function Tab2() {
		this.oAboutBtn=document.getElementById('aboutBtn');
		this.aA=this.oAboutBtn.getElementsByTagName('a');
		this.aAboutContent=getByClass('aboutContent');
		this.num=0;
		var This=this;
		for(var i=0;i<this.aA.length;i++) {
			this.aA[i].index=i;
			this.aA[i].onclick=function() {
				This.num=this.index;
				This.fnClick();

			}
		}

	}
	Tab2.prototype.fnClick=function() {
		for(var i=0;i<this.aA.length;i++) {
			this.aA[i].style.background='#5e5e5e';
			this.aA[i].className='';
			this.aAboutContent[i].style.display='none';	
		}
		this.aA[this.num].style.background='#fff';
		this.aA[this.num].className='active';
		this.aAboutContent[this.num].style.display='block';	
	};
	//普通写法
	/*function aboutBtn() {
		var oAboutBtn=document.getElementById('aboutBtn');
		var aA=oAboutBtn.getElementsByTagName('a');
		var aAboutContent=getByClass('aboutContent');
		for(var i=0;i<aA.length;i++) {
			aA[i].index=i;
			aA[i].onclick=function() {
				for(var i=0;i<aA.length;i++) {
					aA[i].style.background='#5e5e5e';
					aA[i].className='';
					aAboutContent[i].style.display='none';	
				}
				this.style.background='#fff';
				this.className='active';
				aAboutContent[this.index].style.display='block';
			}
		}
	}*/

	//表单光标获取
	function contactLForm() {
		var oContactL=getByClass('contactL')[0];
		var aInp=oContactL.getElementsByTagName('input');
		var oTextarea=oContactL.getElementsByTagName('textarea')[0];
		for(var i=0;i<aInp.length;i++) {
			form(aInp[i],i)
		}
		form(oTextarea,4)
	}

	function form(obj,i) {
		var arr=['填写姓名','联系电话','电子邮件','您的公司','填写详细要求'];
		var num=i;
		var iBtn=true;
		obj.onfocus=function() {
			if(iBtn) {
				this.value='';			
				this.style.color='#000';
				iBtn=false;	
			}
		};
		obj.onblur=function() {
			if(this.value=='') {
				this.value=arr[num];
				this.style.color='#ccc';
				iBtn=true;	
			}
		};	
	};

	//向上滚动
	function scrollTop() {
		var iTimer = null;
		var iBtn = false;
		var oDiv=getByClass('scrollTop')[0];
			//oDiv.style.display='none';
			window.onscroll=function() {
				if (iBtn == false) {
						clearInterval(iTimer);
					}
					iBtn = false;
			};
			oDiv.style.display='block';
			oDiv.onmouseover=function() {
				this.className='scrollTopCur';
			}
			oDiv.onmouseout=function() {
				this.className='scrollTop';
			}
			oDiv.onclick=function() {
				clearInterval(iTimer);
				var iCur = 0;
				var iSpeed = 0;
				iTimer = setInterval(function() {
					iCur = document.documentElement.scrollTop || document.body.scrollTop;
					iSpeed = Math.floor((0 - iCur) / 8);
					if (iCur == 0) {
						clearInterval(iTimer);
					} else {
						document.documentElement.scrollTop = document.body.scrollTop = iCur + iSpeed;
					}
					iBtn = true;
				}, 30);

			};
	};

	//	滚动条高
	function scrollY() {
		return document.documentElement.scrollTop || document.body.scrollTop;	
	};

	//可视区的宽
	function viewW() {
		return document.documentElement.clientWidth;	
	}

	//运动框架
	function startMove(obj, json,speed, fn) {
	clearInterval(obj.iTimer);
	var iCur = 0;
	var iSpeed = 0;
	obj.iTimer = setInterval(function() {
		var iBtn = true;
		for (var attr in json) {

			if (attr == 'opacity') {
				iCur = Math.round(css(obj, 'opacity') * 100);
			} else {
				iCur = parseInt(css(obj, attr));
			}
			iSpeed = (json[attr] - iCur) / speed;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			if (iCur != json[attr]) {
				iBtn = false;
				if (attr == 'opacity') {
					obj.style.opacity = (iCur + iSpeed) / 100;
					obj.style.filter = 'alpha(opacity='+(iCur + iSpeed)+')';
				} else {
					obj.style[attr] = iCur + iSpeed + 'px';
				}
			}

		}

		if (iBtn) {
			clearInterval(obj.iTimer);
			fn && fn.call(obj);
		}

	}, 20);
}

function css(obj, attr) {
	if (obj.currentStyle) {
		return obj.currentStyle[attr];
	} else {
		return getComputedStyle(obj, false)[attr];
	}
}

	//获取className
	function getByClass(sClass,parent) {
		var aEles=(parent || document).getElementsByTagName('*');
		var re=new RegExp('\\b'+ sClass + '\\b');
		var arr=[];
		for(var i=0;i<aEles.length;i++) {
			if(re.test(aEles[i].className)) {
				arr.push(aEles[i])	
			}
		}
		return arr;
	}

	//obj到页面顶部实际距离
	function pos(obj) {
		var result={left:0,top:0};
		while(obj) {
			result.top+=obj.offsetTop;
			result.top+=obj.offsetLeft;
			obj=obj.offsetParent;
		}
		return result;
	};
原创文章:20131211原生js代码 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/949.html)
评论已关闭。