原生jsfor拼接html,原生js滚滚屏.html

*{

margin: 0;

padding: 0;

}

html,body{

width: 100%;

height: 100%;

overflow: hidden;

}

.container{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

transition: all 1s ease 0s;

}

.page{

width: 100%;

height: 100%;

background: yellowgreen;

}

.page0{background-color: yellowgreen;}

.page1{background-color: orange;}

.page2{background-color: skyblue;}

.page3{background-color: gold;}

.page4{background-color: rgb(111,222,123);}

.circles{

width: 15px;

height: 100px;

position: fixed;

right: 10px;

top: 50%;

margin-top: -50px;

/*background-color: red;*/

}

.circles span{

display: inline-block;

width: 15px;

height: 15px;

border-radius: 50%;

background-color: yellow;

font-size: 12px;

text-align: center;

line-height: 15px;

margin-bottom: 5px;

cursor: pointer;

}

.circles span.cur{

background-color: red;

}

0

1

2

3

4

0

1

2

3

4

var container=document.getElementById("container");

//获取所有的焦点

var circles=document.getElementById("circles").children;

//信号量

var idx=0;

//函数节流防止化的太快

var lock=true;

//事件处理函数；

function mousewheelhandler(event){

event=event||window.event;

//节流：

if(!lock){

return;

}

//阻止默认事件

if(event.preventDefault){

event.preventDefault();

}

else{

event.returnValue=false;

}

//chrome,ie用的是event。wheeldelta;

if(event.wheelDelta){

var direction=event.wheelDelta>0?1:-1;

}

else if(event.detail){

//火狐用的是event.detail;

var direction=event.detail>0?-1:1;

}

//滚轮往下滚，-(-1) 就是加一；

idx-=direction;

if(idx<0){

idx=0;

}

else if(idx>4){

idx=4;

}

//设置小圆点

//将所有的小圆点清空

for(var i=0;i

circles[i].className='';

}

//将制定的小圆点的名字，让其背景颜色

circles[idx].className="cur";

container.style.top=-idx*100+"%";

//上锁

lock=false;

//模拟等待1.5秒后开锁，才可以继续滚动

setTimeout(function(){

//解锁

lock=true;

},1000)

}

//这里不用根据不同的浏览器进行判断，这是因为事件添加了如果浏览器不认识，不报错了

//给ie，chrome添加事件

document.onmousewheel=mousewheelhandler;

try{

//给火狐添加事件

document.addEventListener("DOMMouseScroll",mousewheehandler,false);

}

catch(err){

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史