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代码
关注我
我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。
- 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
- 回复「Vue脑图」获取 Vue 相关脑图
- 回复「思维图」获取 JavaScript 相关思维图
- 回复「简历」获取简历制作建议
- 回复「简历模板」获取精选的简历模板
- 回复「加群」进入500人前端精英群
- 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
- 回复「知识点」下载高清JavaScript知识点图谱
每日分享有用的前端开发知识，加我微信:caibaojian89 交流