站长资源
web应用的制作过程中我们经常会用到不断滚动的列表，常见于公告，首页的资讯展示等，该项功能具体是怎么实现的呢，下面就用最通俗易懂的方式给大家讲解。
首先我们今天要用到的函数有jquery的animate，appendTo函数以及setInterval定时器，对这三个函数不了解的朋友建议先去了解下大概的用法。当然今天的内容要有一定的css基础。
思路
1、我们内容外面需要一个包裹的div元素，改元素的高度是有限制的，超出的部分尽兴隐藏
这个比较简单，直接使用css的height和overflow属性
{overflow:hidden;height:22px;line-height:22px;}
2、因为高度只够显示一条内容，所以只需要把盒子置移动一下即可显示下一条，这里还是用css书写：
{marginTop: -22px}
这样我们就让第一条的内容网上提了一个固定高度，从而显示了第二条内容。
说了这么多我们上面提到的三个函数还没有用到，他们有什么用？
定时器这个不必多说，只是让他间隔一定的时间执行以下函数
我们主要讲解animate()函数里面具体要怎么写
定义
animate(styles,speed,easing,callback)
animate有四个参数，第一个样式为必选，其他为可选，最后一个是执行完的回调
第一步我们设置一个执行动画：
$(obj).find("元素").animate({
marginTop: "-22px"
},500)
第二步我们设置它执行完的回调，即把第一个追加到最后
$(obj).find("ul").animate({
marginTop: "-22px"
},500,
function() {
$(this).css({
marginTop: "0px"
}).find("新闻元素:first").appendTo(this);
});
这里面的this指向问题，大家可能不太明白，你只需要知道this指向你选定的那个对象就行了
最后我们通过定时器来让它循环执行
setInterval('xxxfunction("盒子")', 1000)
以上是分步讲解内容，完整代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例操作之新闻不断滚动显示效果的实现</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
ul{list-style:none}
#demo{overflow:hidden;height:22px;line-height:22px;}
</style>
</head>
<body>
<div>
<div style="float:left;">新闻不断滚动效果：</div>
<div id="demo">
<ul>
<li><a href="#">站长资源</a></li>
<li><a href="#">全栈工程师</a></li>
<li><a href="#">正则表达式</a></li>
<li><a href="#">网站模板</a></li>
<li><a href="#">站长常用工具</a></li>
</ul>
</div>
</div>
<script>
function AutoScroll(obj) {
$(obj).find("ul").animate({
marginTop: "-22px"
},
500,
function() {
$(this).css({
marginTop: "0px"
}).find("li:first").appendTo(this);
});
}
setInterval('AutoScroll("#demo")', 1000)
</script>
</body>
</html>
该内容由站长资源原创首发，转载请注明出处
评论前必须登录！
注册