<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字向上间歇滚动</title>
<script src="jquery.min.js"></script>
</head>
<style>
*,p{
padding: 0;
margin: 0;
}
ul,ol{
padding: 0;
margin: 0;
list-style-type: none;
}
.big-box{
position: relative;
width: 500px;
border: 1px solid #ccc;
height: 30px;
margin: 30px auto;
}
.box{
position: absolute;
left: 5px;
top: 0;
width: 490px;
}
.box li{
line-height: 30px;
overflow: hidden;
}
</style>
<body>
<div>
<ul id="box">
<li>1、这是第一条</li>
<li>2、这是第二条</li>
<li>3、这是第三条</li>
<li>4、这是第四条</li>
<li>5、这是第五条</li>
</ul>
</div>
<script>
var $box = $("#box");
var $box_li =$("#box li");
var id = 0;
var up_height = 30; // 每次向上的高度
$liLength = $box_li.length; //获取li的个数
var time = setInterval(up,2000); //定时任务
$box_li.eq(0).clone().appendTo("#box"); //克隆第一个li追加到box
//鼠标经过清除定时器与添加
$box.hover(function(){
clearInterval(time);
},function(){
time = setInterval(up, 2000)
})
//定义UP函数
function up(){
id++;
$box.animate({"top": -id*up_height}, 500,function(){
//向上的次数大于等于li的个数时 box的top值为0
if(id >= $liLength){
id = 0;
$box.css("top",0)
}
})
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
