jQuery让div里的东西来回滚动显示

最新推荐文章于 2024-07-26 03:34:02 发布

cici_xueqin

最新推荐文章于 2024-07-26 03:34:02 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/cici_xueqin/article/details/78531513

版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
body,p {
margin :0;
padding: 0;
}
.box {
height: 100px;
width: 300px;
margin-left: 100px;
overflow: hidden;
border: 1px solid #a00;
position: relative;
}
.gun {
position: absolute;
top:0;
}
li{
height:10px;
}
ul{
height:100px;
}
</style>
</head>

<body>
<div class="box">
<div class="gun">
<p>aaaa</p><p>b</p><p>c</p><p>d</p><p>e</p><p>f</p>
<p>aaaa</p><p>b</p><p>c</p><p>d</p><p>e</p><p>f</p>
</div>
</div>
<script src="jq.js"></script>
<script type="text/javascript">
var gunHeight = $(".gun").height();
console.log(gunHeight);
var boxHeight = $(".box").height();
console.log(boxHeight);

var direction = -1;
var strop=setInterval(function () {
var i = 0;
var gunTop = parseInt($(".gun").css("top"));
if (-gunTop > gunHeight - boxHeight) {
direction = - direction;
// gunTop = 0; 滚完一遍，从头开始滚
}
if (gunTop > 0) {
direction = - direction;
}
$(".gun").css({"top": gunTop + 1 * direction});
},50);

</script>
</body>
</html>