标签：ons font pre 屏幕 osi turn doctype 提高效率 快速
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="UTF-8">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="content">
<div id="floor1" class="item" >
<h2>1F</h2>
<ul>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor2" class="item">
<h2>2F</h2>
<ul>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor3" class="item">
<h2>3F</h2>
<ul>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor4" class="item">
<h2>4F</h2>
<ul>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor5" class="item">
<h2>5F</h2>
<ul>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
</ul>
</div>
</div>
<div id="fixed-tool">
<ul>
<li><a href="#floor1" class=‘current‘>淘宝汇吃</a></li>
<li><a href="#floor2">极有加</a></li>
<li><a href="#floor3">格调</a></li>
<li><a href="#floor4">中国质造</a></li>
<li><a href="#floor5">亲宝贝</a></li>
</ul>
</div>
</body>
</html>* {
margin: 0;
padding: 0
}
body {
font: normal 12/24px ‘宋体‘ arial;
}
.item {
width: 364px;
height: 382px;
border: 1px solid #bfbfbf;
margin-bottom: 20px;
position: relative;
left: 50%;
margin-left: -200px;
}
.item h2 {
width: 364px;
font-size: 16px;
font-weight: bold;
background: blue;
text-align: center;
}
/*#item ul{margin-left: 17px;margin-top: 20px;}*/
.item ul li {
list-style: none;
float: left;
border: 1px solid #ccc;
height: 120px;
}
.item ul li img {
width: 120px;
height: 120px;
}
#fixed-tool {
position: fixed;
left: 50%;
margin-left: 300px;
top: 100px;
}
#fixed-tool li{
list-style: none;
}
#fixed-tool li a {
padding: 5;
display: block;
text-decoration: none;
border-bottom: 1px dotted #ccc;
text-align: center;
width: 40px;
height: 40px;
color: #f93;
}
.current{
background: blue;
}
/*当margin:0 auto时，margin:left top right 之类的实效
居中显示left:50%;width: 400px;margin-left:-200px;
发现有多个a占据着120x16的高度，通过设置#item ul li高度使其直接占据。
margin:0 auto实效的原因
1.要给居中的元素一个宽度，否者无效。
2.该元素一定不能浮动，否者无效。*/
$(function() {
// $(‘.fixed-tool ul li a‘).each(function() {
// $(this).bind(‘click‘, function() {
// var $li = $(this).parent();
// $li.addClass(‘current‘).siblings().removeClass(‘current‘);
// });
// });
$(window).scroll(function() {
var top = $(document).scrollTop(); //屏幕滚动的距离
// console.log(top);
var $item = $(‘#content‘).find(‘.item‘); //找到了div
var $menu = $(‘#fixed-tool‘); //找到了工具条
var currentId = ‘‘; //当前所在楼层的Id
$item.each(function() {
var m = $(this); //每个楼层所在的对象
var itemTop = m.offset().top;//为每个楼层的高度
//获取偏移 有左右
// console.log(m.offset().top);
if (top > itemTop-20) {//这里就解决了临界的问题
currentId = ‘#‘ + m.attr(‘id‘);//如果大于当前楼层的高度，就把当前楼层的高度赋给currentId
} else {
return false;
//如果已经找到了2,345就不用走了，直接跳出循环，提高效率
}
});
var currentLink=$menu.find(‘.current‘);
//如果top很低，则为空，后面的如果刚好为currentId时，就不需要取消
if(currentId&¤tLink.attr(‘href‘)!=currentId){
//1是当高度还很低，没达到时，使currentId为空,2是当前的current所对应的a的href属性不为本身时，
currentLink.removeClass(‘current‘);//去掉不正确的样式
$menu.find(‘[href="‘+currentId+‘"]‘).addClass(‘current‘);//找到正确的链接，加上样式
}
});
// 滚动监听
});
// /jquery通过id获取到的效率比class高/
// 思路是当滚动的距离大于一个楼层的高度时，换到下一个楼层
//这里不需要添加点击事件的原因是，有锚点了。通过锚点的快速定位。标签：ons font pre 屏幕 osi turn doctype 提高效率 快速
原文地址：https://www.cnblogs.com/CaseyWei/p/9476794.html
