您的位置：首页 > 其它

点击上下移动

2017-01-15 00:00 190 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 点击上下移动

相关文章推荐

新的分享

章节导航