站长资源
全栈工程师站点

实例操作之新闻不断滚动显示效果的实现

实例操作之新闻不断滚动显示效果的实现

web应用的制作过程中我们经常会用到不断滚动的列表,常见于公告,首页的资讯展示等,该项功能具体是怎么实现的呢,下面就用最通俗易懂的方式给大家讲解。

首先我们今天要用到的函数有jquery的animate,appendTo函数以及setInterval定时器,对这三个函数不了解的朋友建议先去了解下大概的用法。当然今天的内容要有一定的css基础。

思路

1、我们内容外面需要一个包裹的div元素,改元素的高度是有限制的,超出的部分尽兴隐藏

这个比较简单,直接使用css的heightoverflow属性

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

该内容由站长资源原创首发,转载请注明出处

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 实例操作之新闻不断滚动显示效果的实现

评论 抢沙发

评论前必须登录!