类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;jdone
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

 

轮播部分

基本思想，把每一页放在一个打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=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();