Home > Developer > Web Develop
Today I write a floor effect, a little irritable, small place to make mistakes. You big God to revise insufficient AH!!!
<! DOCTYPEHtml>
lang="EN">
<metacharset="UTF-8">
<title> Floor Switch</title>
<style>
*{Padding0;Margin0;}
li{List-style:None;}
.Mainimg{Width850Px;Height700Px;FloatLeft;}
.title{Width850Px;Height50Px;Text-align:Center;Line-height:50Px;}
.floor{PositionFixed;Top20Px;Right20Px;DisplayNone;}
.FloorUL li{Width70Px;Height30Px;Text-align:Center;Line-height:30Px;CursorHand;CursorPointer
.listyle{Background-color:Red;}
.loading{BackgroundUrl"Image/loading.gif")No-repeat Center Center;}
#back {CursorHand;CursorPointer;}
</style>
<body>
<divclass="Main"Id="Main">
class="Title"> Photo Appreciationas="Image/1.jpg"/>
as="Image/2.jpg"/>
as="Image/3.jpg"/>
as="Image/4.jpg"/>
as="Image/5.jpg"/>
as="Image/6.jpg"/>
as="Image/7.gif"/>
as="Image/8.jpg"/>
as="Image/9.jpg"/>
as="Image/10.jpg"/>
</div>
<divclass="Floor"Id="Floor">
<ulId="Floorul">
<li> the first one</li>
<li> Second photo</li>
<li> the third one</li>
<li> Fourth Photo</li>
<li> Fifth photo</li>
<li> Sixth photo</li>
<li> Seventh photo</li>
<li> Eighth photo</li>
<li> Nineth Photo</li>
<li> Tenth photo</li>
</ul>
<pId="Back" > Return top </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>
JS to achieve the floor effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
