<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 鼠標(biāo)滾動(dòng)一屏-JavaScript </title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100vw;
height: 100vh;
text-align: center;
font-size: 100px;
overflow: hidden;
}
.box{
width: 100vw;
height: 500vh;
position: relative;
top: 0;
left: 0;
}
.box div{
width: 100vw;
height: 100vh;
}
.box div.item1{
background: red;
}
.box div.item2{
background: yellow;
}
.box div.item3{
background: gold;
}
.box div.item4{
background: green;
}
.box div.item5{
background: blue;
}
#list{
width: 50px;
height: 250px;
position: absolute;
top: 50%;
right: 20px;
margin-top: -125px;
font-size: 35px;
}
#list li{
width: 50px;
height: 50px;
list-style: none;
line-height: 50px;
text-align: center;
background-color: #E3E3E3;
}
#list li.active{
color: #FFF;
font-weight: 900;
background: greenyellow;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="item1">屏幕01</div>
<div class="item2">屏幕02</div>
<div class="item3">屏幕03</div>
<div class="item4">屏幕04</div>
<div class="item5">屏幕05</div>
</div>
<ul id="list">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var oBox = document.getElementById("box");
var oList = document.getElementById("list");
var oLi = oList.getElementsByTagName("li");
// var oLi = document.querySelectorAll("#list li");
function on( obj,eventName,fn ){
if( obj.addEventListener ){
obj.addEventListener(eventName,fn);
}else{
obj.attachEvent(eventName,fn);
};
};
function handler(ev){
var num = 0;
var ev = window.event || ev;
if( ev.wheelDelta == -120 || ev.detail == 3 ){
num ++;
if( num > 4 ){
num = 4;
};
}else{
num --;
if( num < 0 ){
num = 0;
};
};
oBox.style.top = -num * 100 + "vh";
for( var i = 0,len = oLi.length;i < len;i ++ ){
oLi[i].className = '';
}
oLi[num].className = 'active';
};
on( document,'mousewheel',handler );
on( document,'DOMMouseScroll',handler );
</script>
</body>
</html>
實(shí)現(xiàn)鼠標(biāo)滾輪滾動(dòng)一屏
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門(mén)展运，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)活逆，“玉大人，你說(shuō)我怎么就攤上這事拗胜≌岷颍” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵挤土，是天一觀的道長(zhǎng)琴庵。 經(jīng)常有香客問(wèn)我，道長(zhǎng)仰美，這世上最難降的妖魔是什么迷殿？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮咖杂，結(jié)果婚禮上庆寺，老公的妹妹穿的比我還像新娘。我一直安慰自己诉字，他們只是感情好懦尝，可當(dāng)我...
- 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著壤圃，像睡著了一般陵霉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上伍绳，一...
- 那天踊挠，我揣著相機(jī)與錄音，去河邊找鬼冲杀。 笑死效床，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的权谁。 我是一名探鬼主播剩檀，決...
- 文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼旺芽！你這毒婦竟也來(lái)了沪猴？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤采章，失蹤者是張志新（化名）和其女友劉穎运嗜，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體共缕，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年士复，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了图谷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片翩活。...
- 正文 年R本政府宣布利耍，位于F島的核電站，受9級(jí)特大地震影響盔粹，放射性物質(zhì)發(fā)生泄漏隘梨。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一舷嗡、第九天 我趴在偏房一處隱蔽的房頂上張望轴猎。 院中可真熱鬧，春花似錦进萄、人聲如沸捻脖。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)可婶。三九已至，卻和暖如春援雇，著一層夾襖步出監(jiān)牢的瞬間矛渴，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓晶府，卻偏偏與公主長(zhǎng)得像桂躏，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子川陆，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 原理：window/document對(duì)象的mousewheel事件
- 只為以后查找方便剂习。 之前遇到過(guò)一個(gè)小效果，有兩個(gè)div较沪，需要隨著鼠標(biāo)的滾動(dòng)鳞绕，下面的div滾動(dòng)的比上面慢，但當(dāng)兩個(gè)d...
- 在一個(gè)農(nóng)家院里養(yǎng)了好多的雞冤竹，我從外面開(kāi)了柵欄的鎖拂封，（這是一條鏈子鎖），結(jié)果一只雞徑直往一個(gè)方向去了鹦蠕，走的挺有精神的
- 實(shí)現(xiàn)過(guò)微信分享的小伙伴們冒签，應(yīng)該都在微信的開(kāi)發(fā)平臺(tái)上修改過(guò)上圖中的小圖標(biāo)和文字，但是當(dāng)我們對(duì)小圖標(biāo)和文字進(jìn)行修改后钟病，...
