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

效果图

动画部分代码

动画部分采用替换标签中类的方法，有两个类，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加了个！importanttipNum=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.clientHeightfor(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();

类360极速浏览器官网html相关推荐

360手机论坛刷机包 360手机ROM下载 360手机官网刷机包 360手机刷机包分享下载
360手机论坛刷机包 360手机ROM下载 360手机官网刷机包 360手机刷机包分享下载参考:360手机-360刷机360刷机包twrp.root 360刷机包360手机刷机:360rom.gi ...
360搜索官网认证说明
官网简介 360官网认证,是当网民通过360搜索特定搜索词时,由用户提交,所触发的自然搜索结果中,对"该搜索词与所属主体唯一且对应一致的官方网站"展示官网标识,以防止山寨.钓鱼网站 ...
通过360站长平台，免费让360显示官网
如何让网站在360搜索里显示"官网"标记,很多同学都是按照标记的提示一步步的操作,接着就跳转到要第三方的认证平台了,其实小编也是过来人,这些第三方都是开价一年3600的最低收费,实 ...
如何让网站在360搜索结果中显示“官网”标志？
如何让网站在360搜索结果中显示"官网"标志?很多同学都是按照标记的提示一步步的操作,接着就跳转到要第三方的认证平台了,其实我也是过来人,这些第三方都是开价一年3600的最低收费, ...
360极速浏览器国际版？
对浏览器一直有强迫症,但没有一个浏览器是完美的. 最开始接触电脑的时候,装了360安全卫士和杀软,所以自然用360安全浏览器.后来遇到了chrome,就改为chrome了.原因只有一个:我需要跨平台的 ...
虚幻4 游戏引擎 C++编程官网例程解析
虚幻4游戏引擎C++编程官网例程解析官网例程源代码 FloatingActor.h FloatingActor.cpp 内容说明 pragma once 头文件 UClass宏 AActor类 P ...
Java开发官网地址大全
1.Java开发官网 Mybatis Mybatis中文网 https://mybatis.net.cn/ mybatis pagehelper 分页插件 MyBatis 分页插件 PageHelpe ...
360能root手机么，360超级root手机版官网
360一键root怎么用 360一键root工具是奇虎360专门为安卓用户提供的一键提取系统 Root 权限工具,目前此工具已为众多用户成功实现了手机 Root 操作.和百度一键 Root 工具.腾讯 ...
OpenCV Mat类详解和用法（官网原文）
参考文章:OpenCV Mat类详解和用法我马克一下,日后更官网原文链接:https://docs.opencv.org/3.2.0/d6/d6d/tutorial_mat_the_basic_i ...

类360极速浏览器官网html

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

效果图

动画部分代码

轮播部分

类360极速浏览器官网html相关推荐

最新文章

热门文章