您的位置：首页 > 其它

jq 实现文字定时向上滚动效果

2016-03-18 23:11 537 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{ width:300px; height:30px; border:1px solid red;}
.wrap_box{ height:30px; position:relative; overflow:hidden;}
.wrap_box ul{ position:absolute; left: 0; top: -20px;}
.wrap_box li{ line-height:30px;}
</style>

<script src="jquery-2.2.2.min.js"></script>
<!-- 自行引入jq文件 -->
<script>
$(function(){
var num = -30;
// console.log($(".ul1").position().top); //测试是否能取到
setInterval(function(){

var num1  = $(".ul1").position().top + num;
console.log(num1);//看数据
if(num1 <= -440) //因为是小数 为什么是小于等于的  如果不是整-440的话就不会进入判断 所有小于等于
{
num1 = -20; //开始定位的时候定在了-20的位置 所以要到-20
}
$(".ul1").animate({"top":num1})
}, 2000)
})

</script>
</head>
<body>
<div class="box">
<div class="wrap_box">
<ul class="ul1">
<li><a href="">，jQuery的css方法获得</a></li>
<li><a href="">left数据数值可</a></li>
<li><a href="">不可以去</a></li>
<li><a href="">掉</a></li>
<li><a href="">px</a></li>
<li><a href="">，jQuery的css方法获得</a></li>
<li><a href="">left数据数值可</a></li>
<li><a href="">不可以去</a></li>
<li><a href="">掉</a></li>
<li><a href="">px</a></li>
<li><a href="">，jQuery的css方法获得</a></li>
<li><a href="">left数据数值可</a></li>
<li><a href="">不可以去</a></li>
<li><a href="">掉</a></li>
<li><a href="">px</a></li>
</ul>
</div>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航