简单楼层效果
来源:互联网 发布:淘宝分销商发货流程 编辑:程序博客网 时间:2024/03/28 18:14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0}
#container{width:1000px;margin:0 auto;}
#container>div{width:100%;height:500px;background-color:#ccc;font-size:120px;line-height:500px;text-align: center;color:#fff;}
#container>div:nth-of-type(2){background-color:red;}
#container>div:nth-of-type(3){background-color:blue;}
#container>div:nth-of-type(4){background-color:orange;}
#container>div:nth-of-type(5){background-color:cadetblue;}
#container>div:nth-of-type(6){background-color:pink;}
#container>div:nth-of-type(7){background-color:peru;}
#container>div:nth-of-type(8){background-color:cadetblue;}
#container>div:nth-of-type(9){background-color:black;}
#container>div#header,#container>div#footer{height:200px;}
#container>div#header{height:380px;line-height:380px;}
ul{list-style:none;position:fixed;top:280px;margin-left:-80px;}
ul>li{cursor:pointer;width:30px;height:30px;font-size:20px;line-height:30px;text-align:center;background-color:#fff;border:solid 1px #333;}
ul>li.active{background-color:red;color:#fff;}
ul>li:hover{background-color:red;color:#fff;}
</style>
</head>
<body>
<div id="container">
<ul id="floor">
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
<li>6F</li>
<li>7F</li>
<li>8F</li>
</ul>
<div id="header">PAGE HEADER</div>
<div>1楼</div>
<div>2楼</div>
<div>3楼</div>
<div>4楼</div>
<div>5楼</div>
<div>6楼</div>
<div>7楼</div>
<div>8楼</div>
<div id="footer"></div>
</div>
<script>
// 获取所有的li和div标签
var _lis = document.getElementById("floor").getElementsByTagName("li");
var _divs = document.getElementById("container").getElementsByTagName("div");
var _distance = 200;// 楼层上升到某个位置
// 添加滚动条事件,完成楼层出现亮灯效果
window.onscroll = function() {
// 获取到滚动条的卷去网页的高度
var _stop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = 0; i < _lis.length; i++) {
// 获取楼层的offsetTop和offsetHeight进行比较
var _floorTop = _divs[i+1].offsetTop;
var _floorHeight = _divs[i+1].offsetHeight;
if(_stop + _distance >= _floorTop
&& _stop + _distance < (_floorTop + _floorHeight)) {// 当条件满足的时候,对应的楼层亮灯
_lis[i].className = "active";
} else {
_lis[i].className = "";
}
}
}
// 添加点击事件,让点击的楼层出现在网页中
for(var j = 0; j < _lis.length; j++) {
_lis[j].index = j;//记录一个编号
// 当楼层点击时
_lis[j].onclick = function() {
var _pos = _divs[this.index + 1].offsetTop;
var _stop = document.documentElement.scrollTop || document.body.scrollTop;
if(_pos > _stop) {// 向下滚动
var _speed = 30;
var _t1 = setInterval(function() {
var _stop1 = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, _stop1 + _speed);
if(_stop1+_divs[0].offsetHeight/2 >= _pos){
clearInterval(_t1);
}
}, 1);
} else {// 向上滚动
var _speed = 30;
var _t1 = setInterval(function() {
var _stop1 = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, _stop1 - _speed);
if(_stop1 <= _pos){
clearInterval(_t1);
}
}, 1);
}
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0}
#container{width:1000px;margin:0 auto;}
#container>div{width:100%;height:500px;background-color:#ccc;font-size:120px;line-height:500px;text-align: center;color:#fff;}
#container>div:nth-of-type(2){background-color:red;}
#container>div:nth-of-type(3){background-color:blue;}
#container>div:nth-of-type(4){background-color:orange;}
#container>div:nth-of-type(5){background-color:cadetblue;}
#container>div:nth-of-type(6){background-color:pink;}
#container>div:nth-of-type(7){background-color:peru;}
#container>div:nth-of-type(8){background-color:cadetblue;}
#container>div:nth-of-type(9){background-color:black;}
#container>div#header,#container>div#footer{height:200px;}
#container>div#header{height:380px;line-height:380px;}
ul{list-style:none;position:fixed;top:280px;margin-left:-80px;}
ul>li{cursor:pointer;width:30px;height:30px;font-size:20px;line-height:30px;text-align:center;background-color:#fff;border:solid 1px #333;}
ul>li.active{background-color:red;color:#fff;}
ul>li:hover{background-color:red;color:#fff;}
</style>
</head>
<body>
<div id="container">
<ul id="floor">
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
<li>6F</li>
<li>7F</li>
<li>8F</li>
</ul>
<div id="header">PAGE HEADER</div>
<div>1楼</div>
<div>2楼</div>
<div>3楼</div>
<div>4楼</div>
<div>5楼</div>
<div>6楼</div>
<div>7楼</div>
<div>8楼</div>
<div id="footer"></div>
</div>
<script>
// 获取所有的li和div标签
var _lis = document.getElementById("floor").getElementsByTagName("li");
var _divs = document.getElementById("container").getElementsByTagName("div");
var _distance = 200;// 楼层上升到某个位置
// 添加滚动条事件,完成楼层出现亮灯效果
window.onscroll = function() {
// 获取到滚动条的卷去网页的高度
var _stop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = 0; i < _lis.length; i++) {
// 获取楼层的offsetTop和offsetHeight进行比较
var _floorTop = _divs[i+1].offsetTop;
var _floorHeight = _divs[i+1].offsetHeight;
if(_stop + _distance >= _floorTop
&& _stop + _distance < (_floorTop + _floorHeight)) {// 当条件满足的时候,对应的楼层亮灯
_lis[i].className = "active";
} else {
_lis[i].className = "";
}
}
}
// 添加点击事件,让点击的楼层出现在网页中
for(var j = 0; j < _lis.length; j++) {
_lis[j].index = j;//记录一个编号
// 当楼层点击时
_lis[j].onclick = function() {
var _pos = _divs[this.index + 1].offsetTop;
var _stop = document.documentElement.scrollTop || document.body.scrollTop;
if(_pos > _stop) {// 向下滚动
var _speed = 30;
var _t1 = setInterval(function() {
var _stop1 = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, _stop1 + _speed);
if(_stop1+_divs[0].offsetHeight/2 >= _pos){
clearInterval(_t1);
}
}, 1);
} else {// 向上滚动
var _speed = 30;
var _t1 = setInterval(function() {
var _stop1 = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, _stop1 - _speed);
if(_stop1 <= _pos){
clearInterval(_t1);
}
}, 1);
}
}
}
</script>
</body>
</html>
0 0
- 简单楼层效果
- 楼层效果
- elevator楼层效果
- jquery仿京东楼层效果
- jquery楼层效果
- 楼层直达效果解读
- 电商楼层跳转效果
- jq实现的楼层效果
- 楼层
- 仿网易新闻评论的楼层效果
- js实现留言板-楼层效果展示
- JQ楼层效果 需改良左右两边定位问题
- 常见的js效果(一)之固定楼层导航栏
- 楼层跳跃
- 楼层跳跃
- 楼层建筑面积 floor space
- 楼层扔鸡蛋问题
- 楼层扔鸡蛋问题
- Vim最常用命令
- 数据库mysql的基础结构
- MySQL安装
- React学习笔记—虚拟DOM
- 备忘[cocos lua 绑定c方法] 3.10
- 简单楼层效果
- AVPlayer 截取视频流的当前帧
- 基础数据库查询优化
- mongdb模糊查询与分页
- TCP窗口扩大选项
- 倒计时效果
- mysql日期类型比较
- git命令之git tag 给当前分支打标签
- 张小龙:微信小程序服务范围重大更新,小程序1月9日发布