滚动楼层导航html,模仿楼层滚动.html

Document

*{

margin: 0;

padding: 0;

list-style: none;

}

html,body{

width: 100%;

height: 100%;

}

.main{

width: 800px;

height: 100%;

margin: 0 auto;

}

.main li{

width: 800px;

height: 500px;

margin-bottom:158px;

font-size: 100px;

}

.floor{

position:fixed;

left: 50px;

top:200px;

}

.floor ul{

width: 40px;

background: red;

}

.floor ul li{

width: 40px;

height: 40px;

background: yellow;

line-height: 40px;

text-align: center;

cursor: pointer;

font-family: 微软雅黑;

font-size: 12px;

color:#666;

}

• banner
• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 导航栏
• 1F
• 2F
• 3F
• 4F
• 5F
• 6F
• 7F

// 获取li集合

var li = document.getElementById('floors').getElementsByTagName('li');

// 定义数组

var arr = ['导航栏','服装','手机','家具','游戏','电器','通信','冰箱'];

var arr1 = ['导航栏','1F','2F','3F','4F','5F','6F','7F'];

// 遍历

for( var i=0;i

// 存下标

li[i].i = i;

// console.log(li);

li[i].οnmοuseοver=function(){

this.innerHTML=arr[this.i];

this.style.background="red";

this.style.color='#fff';

}

li[i].οnmοuseοut=function(){

this.innerHTML=arr1[this.i];

this.style.background="yellow";

this.style.color="#666";

}

}

$("li").click(function(){

var index=$(this).index();

var height=$(window).height();

$("html,body").animate({

scrollTop:index * height + "px"

},300)

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史