<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>樓層切換</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.main img {
width: 850px;
height: 700px;
float: left;
}
.title {
width: 850px;
height: 50px;
text-align: center;
line-height: 50px;
}
.floor {
position: fixed;
top: 20px;
right: 20px;
display: none;
}
.floor ul li {
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: hand;
cursor: pointer
}
.liStyle {
background-color: red;
}
.loading {
background: url("image/loading.gif") no-repeat center center;
}
#back {
cursor: hand;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main" id="main">
<h3 class="title">圖片欣賞</h3>
<img as="image/1.jpg" />
<img as="image/2.jpg" />
<img as="image/3.jpg" />
<img as="image/4.jpg" />
<img as="image/5.jpg" />
<img as="image/6.jpg" />
<img as="image/7.gif" />
<img as="image/8.jpg" />
<img as="image/9.jpg" />
<img as="image/10.jpg" />
</div>
<div class="floor" id="floor">
<ul id="floorUl">
<li>第一張</li>
<li>第二張</li>
<li>第三張</li>
<li>第四張</li>
<li>第五張</li>
<li>第六張</li>
<li>第七張</li>
<li>第八張</li>
<li>第九張</li>
<li>第十張</li>
</ul>
<p id="back">返回頂部</p>
</div>
<script>
var main = document.getElementById("main");
var floor = document.getElementById("floor");
var image = main.getElementsByTagName("img");
var floorUl = document.getElementById("floorUl");
var li = floorUl.getElementsByTagName("li");
var back = document.getElementById("back");
window.onload = window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = document.documentElement.clientHeight || document.body.clientHeight;
for(var i = 0; i < image.length; i++) {
image[i].className = "loading";
if(delay(image[i]).top < scrollTop + height) {
image[i].src = image[i].getAttribute("as");
}
}
if(scrollTop >= image[0].offsetTop) {
floor.style.display = "block";
} else {
floor.style.display = "none";
}
var num = 0;
for(var i = 0; i < image.length; i++) {
if(scrollTop >= image[i].offsetTop) {
num = i;
}
li[i].className = "";
}
li[num].className = "liStyle";
for(var i = 0; i < li.length; i++) {
li[i].onclick = function() {
for(var j = 0; j < li.length; j++) {
if(this == li[j]) {
document.documentElement.scrollTop = image[j].offsetTop;
document.body.scrollTop = image[j].offsetTop;
}
}
}
}
}
var time = null;
back.onclick = function() {
function goBack() {
var ss = document.documentElement.scrollTop || document.body.scrollTop;
ss -= 50;
document.documentElement.scrollTop = ss;
document.body.scrollTop = ss;
if(ss <= 0) {
clearInterval(time);
}
}
time = setInterval(goBack, 1);
}
function delay(obj) {
var l = 0;
var t = 0;
while(obj) {
l = l + obj.offsetLeft;
t = t + obj.offsetTop;
obj = obj.offsetParent;
}
return {
left: l,
top: t
};
}
</script>
</body>
</html>樓層效果
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門沐兵，熙熙樓的掌柜王于貴愁眉苦臉地迎上來别垮，“玉大人，你說我怎么就攤上這事扎谎√枷耄” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵毁靶，是天一觀的道長(zhǎng)胧奔。 經(jīng)常有香客問我，道長(zhǎng)预吆，這世上最難降的妖魔是什么龙填？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮拐叉，結(jié)果婚禮上岩遗，老公的妹妹穿的比我還像新娘。我一直安慰自己凤瘦，他們只是感情好宿礁，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著廷粒，像睡著了一般窘拯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上坝茎，一...
- 文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼岳服！你這毒婦竟也來了剂公？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬榮一對(duì)情侶失蹤吊宋，失蹤者是張志新（化名）和其女友劉穎纲辽，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(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)境...
- 文/蒙蒙 一脐帝、第九天 我趴在偏房一處隱蔽的房頂上張望同云。 院中可真熱鬧，春花似錦堵腹、人聲如沸炸站。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽旱易。三九已至禁偎，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間阀坏，已是汗流浹背如暖。 一陣腳步聲響...
- 正文 我出身青樓，卻偏偏與公主長(zhǎng)得像士修，于是被迫代替她去往敵國(guó)和親枷遂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 剛剛看過了小森林冬春篇 這是一部完全抹殺了現(xiàn)在互聯(lián)網(wǎng)時(shí)代的痕跡 聯(lián)絡(luò)需要用書信 沒有各種社交方式 是一部通過文藝小...
- 上次推過8月院線電影指南在辆，當(dāng)時(shí)斌叔就說《心理罪》對(duì)廖凡很期待证薇，果然，廖凡還是沒失望匆篓，但驚喜的是李易峰進(jìn)步了浑度。 《心...
