<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,ol{
list-style: none;
}
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
}
#ul{
width: 100%;
height: 100%;
}
ul li{
width: 100%;
height: 100%;
}
#ol{
position: fixed;
top: 0;
left: 50px;
}
#ol li{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul id="ul">
<li>首页</li>
<li>关注</li>
<li>动态</li>
<li>风格</li>
<li>作品</li>
</ul>
<ol id="ol">
<li>首页</li>
<li>关注</li>
<li>动态</li>
<li>风格</li>
<li>作品</li>
</ol>
</body>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
var bgcolor = ['pink','cyan','red','orange','green'];
var uli = $('ul').children();
var oli = $('ol').children();
$.each(bgcolor,function(k,v){
uli.eq(k).css('background',bgcolor[k]);
oli.eq(k).css('background',bgcolor[k]);
oli.click(function(){
$.toset(uli,$(this).index())
});
});
var h = window.innerHeight;
var num = 0;
document.onmousewheel=function(e){
if(e.deltaY==100){
if(num<4){
num++;
}
}else{
if(num>0){
num--
}
}
console.log(num)
window.scrollTo(0,num*h);
}
</script>
</html>
demo 鼠标滚动切屏
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 一.原生JS实现页面滚动方向检测 判断页面滚动方向是一个常见的需求;关键点可以利用pageXOffset,pa...
- 相信使用习惯了Mac的同学，再使用windows的时候各种不习惯， 小编我也是深受其害， 研究一番过后， 得到解决...
