<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.content {
margin-top: 80px;
}
.box {
width: 100px;
height: 600px;
border: 1px solid #000;
overflow: hidden;
}
ul {
list-style: none;
}
.top {
width: 100px;
height: 30px;
margin-bottom: 10px;
background-color: #FF4500;
text-align: center;
color: #fff;
}
.bottom {
width: 100px;
height: 30px;
margin-top: 10px;
background-color: slateblue;
text-align: center;
color: #fff;
}
.content_ul {
width: 100%;
}
.li {
width: 100%;
height: 100px;
text-align: center;
font-size: 2rem;
color: #fff;
}
.li:nth-of-type(odd) {
background: #ff0000;
}
.li:nth-of-type(even) {
background: #0000ff;
}
</style>
</head>
<body>
<div class="content">
<div class="top">TOP</div>
<div class="box">
<ul class="content_ul">
<li class="li">1</li>
<li class="li">2</li>
<li class="li">3</li>
<li class="li">4</li>
<li class="li">5</li>
<li class="li">6</li>
<li class="li">7</li>
<li class="li">8</li>
</ul>
</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
<script>
$(function() {
var a = 0;
var c = 100;
$(".bottom ").click(function() {
var box_coordinate = $(".box").offset(); //获取固定的盒子坐标
var li_coordinate = $(".li:first").offset(); //获取第一个值的坐标
var top = li_coordinate.top;
if(parseInt(top)!= parseInt(box_coordinate.top + 1)) {
a += c;
$(".content_ul").css("margin-top", a)
} else {
alert("已经到顶了哦")
}
})
$(".top").click(function() {
var box_coordinate = $(".box").offset(); //获取固定的盒子坐标
var li_coordinate = $(".li:last").offset(); //获取最后一个值
var top = li_coordinate.top;
var height = $(".box").css("height");
height = parseInt(height);
if(parseInt(top) >= parseInt(height + box_coordinate.top +1) ) {
a -= c;
$(".content_ul").css("margin-top", a)
} else {
alert("已经到底了哦")
}
})
})
</script>
扫一扫
1572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
