类360极速浏览器官网html

打算考考研了，所以把之前没写的博客都补一下。赶紧去钻进考研的学习中。

 

效果图 

 

 动画部分代码

动画部分采用替换标签中类的方法，有两个类，init（动画初始化）、done（动画开始）。

当显示该页面时就开始该页面的动画，并且初始化上一个页面的动画。

 var animationElement={
	".box1":[
		".font1",
		".phone1",
		".shadow1"
	],
	".box2":[
		".font21",
		".font22",
		".phone2",
		".left1",
		".right1",
		".right2"
	],
	".box3":[
		".font31",
		".font32",
		".kuai1",
		".phone3"
	],
	".box4":[
		".font41",
		".font42",
		".phone41.one",
		".phone41.two",
		".phone41.three",
		".phone41.four"
	]
}
 var all={};
 //获取各动画元素上的所有类
getAllCls();
 function getAllCls(){
 	for(var i=0;i<4;i++){
 		var n=".box"+(i+1);
 		var a=animationElement[n].length;
 		for(var j=0;j<a;j++){
 			all[animationElement[n][j]]=document.querySelector(animationElement[n][j]).className;
 		}
 	}
 	console.log(all);
 }
 
//给某节点添加动画类  init-->done
function addCls(cls){//cls是需要初始动画的类
	var node=document.querySelector(cls);
	node.className=all[cls].replace("init","done");
	console.log(node.className);
}
//给某节点添加动画类  init<--done
function delCls(cls){//cls是需要初始动画的类
	var node=document.querySelector(cls);
	node.className=all[cls].replace("done","init");
}
//动画开始
function play(idx){//idx为需要播放动画的页，值为.box1，.box2等等
	var animationNodes=animationElement[idx];
	for(var i=0;i<animationNodes.length;i++){
		console.log(animationNodes[i]);
		addCls(animationNodes[i]);
	}
}
//动画开始后初始化
function init(idx){//idx为需要动画初始化的页，值为.box1，.box2等等
	var animationNodes=animationElement[idx];
	for(var i=0;i<animationNodes.length;i++){
		delCls(animationNodes[i]);
	}
}
/*play(".box1");
play(".box2");
play(".box3");*/
play(".box1");

 

轮播部分

基本思想，把每一页放在一个打box里面，通过控制这个box的top，来切换每一页。

本案例可以用鼠标光标和滑轮来切换页面。

也可以通过导航来控制页面，同时导航栏也会根据页面进行相应的变化

var tipNum=0;//nav里面的被选中的项，默认在第一个位置
var colorId;
var navItem=document.querySelectorAll(".navItem");
var t=document.querySelector(".nav-tip");//选中时nav下面的红线
var tipp=function(idx){
	console.log(1);
	navItem[idx].onmouseover=function(){
		t.style.left=idx*72+"px";

	}
	navItem[idx].onmouseout=function(){
		t.style.left=tipNum*72+"px";
	}
	navItem[idx].onclick=function(){
		navItem[tipNum].style.color="#292f35";//给hover加了个！important
		tipNum=idx;
		console.log(tipNum);
		this.style.color="red";
		t.style.left=tipNum*70+"px";
		navControlDom(tipNum+1);
	}
}
for(var i=0;i<navItem.length;i++){
	tipp(i);
}

//nav控制页面
function navControlDom(id){
	console.log('idd:'+idd+'id:'+id);
	if(id==idd){
		return;
	}else{
		init('.box'+idd)
		box.style.top=-(id-1)*clientHeight+'px';
		idd=id;
		play('.box'+idd);
	}
}






//滑轮和光标控制页面
	var box=document.getElementsByClassName('box')[0];
	var clientHeight=document.documentElement.clientHeight;
	var boxNum=box.children.length;
	var isWheel=true;//是否可以用滑轮控制轮播
	var idd=1;//每页的id号，是明线，贯穿全局
	
	//当屏幕窗口改变时触发，解决了在打开控制台的时候刷新页面，去掉控制台后页面大小不会还原的问题
	window.onresize=function(){
		clientHeight=document.documentElement.clientHeight
		for(var i=0;i<boxNum;i++){
			box.children[i].style.height=clientHeight;//同时也要更新这个值
		}
		box.style.top=-(idd-1)*clientHeight+'px';
		box.style.transition='0s'
		console.log(111);
	}
	//给每一页添加高度
	for(var i=0;i<boxNum;i++){
		box.children[i].style.height=clientHeight+'px';
	}
		//滚（划）动
	function toMove(id,moveGap,Gap){//id：页面的id，从1开始；moveGap：距离变量；Gap：要判断的距离值
		console.log('id:'+id+";moveGap:"+moveGap+";Gap:"+Gap);
		if(moveGap>=Gap&&id+1<=boxNum){//向下滑
			box.style.top=-id*clientHeight+'px';
			idd+=1;
			play('.box'+idd);
		}
		else if(moveGap<=-Gap&&id-1>=1){//向c上滑
			box.style.top=-(id-1-1)*clientHeight+'px';
			idd-=1;
			play('.box'+idd);
			
		}else{
			return;
		}
		//页面变化，导航栏也变化
		navItem[id-1].style.color='#292f35';
		navItem[idd-1].style.color='red';
		t.style.left=(idd-1)*70+"px";
		tipNum=idd-1;
		//初始化上一个页面，idd是当前的页面
		init('.box'+id);
		box.style.transition='.5s';
	}
	
	
	cursor();
	//用鼠标光标控制轮播
	function cursor(){
		box.onmousedown=function(event){
			var x=event.x;
			var y=event.y;
			var that=this;
			var ns,ny,isUp=false,move,oldMove=y,totalMove;
			console.log(event)
			this.onmouseup=function(event){
				that.onmousemove=null;
				nx=event.x;
				ny=event.y;
				isUp=true;
				totalMove=y-event.y;
				toMove(idd,totalMove,100);
			}
			this.onmousemove=function(event){
				move=oldMove-event.y;
				oldMove=event.y;
				console.log(move);
				if(move>0&&parseInt(box.style.top)>-(boxNum-1)*clientHeight){//鼠标光标向上划
					box.style.top=parseInt(box.style.top)-move+'px';
				}else if(move<0&&parseInt(box.style.top)<0){//鼠标光标向下划
					box.style.top=parseInt(box.style.top)-move+'px';
				}				
				event.preventDefault();
				console.log(event)
			}
		}
	}
	
	//滑轮控制轮播
	function wheel(){
		function openWheel(){//防止稍微滚一下页面飞多么远
			isWheel=true;
		}
		window.onmousewheel=function(event){//滑轮控制轮播
			if(isWheel==false){//如果为false，直接退出，不在经理下面步骤，包括setTimeout，这个判断写在下面的if中会有setTimeout引起的bug，
				return;
			}
			console.log(idd);
			toMove(idd,event.deltaY,100);
			isWheel=false;
			setTimeout(openWheel,1000);
		}
	}
	wheel();