jQuery上下滚动公告栏的详细代码

之前做项目的时候，一直想做一个上下滚动的公告板，作为展示网站的最新公告信息。因为一开始没有明确的想法，在网上找了很多源代码，但是发现不能满足自己，有些会出现一些小问题。例如，有时当公告上下滚动时，两个公告会重叠。最后，我决定写一个可以上下滚动的公告牌。

虽然网上发现的一些代码有时会有一些问题，但我们可以从中吸取教训。

我们来看看我做的上下滚动的公告牌渲染图。如果你觉得这是你想要的，那么你可以下去看看它是如何实现的。

图中箭头所指的内容是公告内容，会不断上下滚动。当然，滚动时间可以自行设定。

让我们看看这是如何实现的。

其实jQuery中的animation()方法主要是用来实现滚动效果的，animation()方法是创建一个动画效果。简而言之，当我们使用js将树的高度属性从100px更改为200px时，我们会看到树瞬间从100增长到200，但是我们使用了animation()方法。我们可以看到“树”从100到200生长缓慢。我们可以看到这个过程，这是animate()方法的功能。当然，“树”的生长速度是可以控制的。

知道了jQuery的animate()方法，我们还需要知道setInterval()方法。很多学生可能知道这个方法，因为它是一个简单的计时函数。让我们来看看它的用法。

setInterval(函数(){ alert(' Hello ')；}, 3000);

这段代码是每3秒执行一次这个方法，然后弹出一个“你好”。

好了，了解了前两种方法，就一定能读懂下面的代码。

！doctype html head metharset=' utf-8 ' title scroll公告牌/title script type=' text/JavaScript ' src=' http : js/jquery-3 . 3 . 1 . min . js '/script style type=' text/CSS ' body { padding 33600；margin:0背景-color : # F9 F9 F9 } . ul1 { list-style : none；margin: 0 } li { padding: 5px}/style/head dydiv style=' height : 60px；背景-颜色： # 191 e29；'p style=' margin : 0；color: # fff线高： 60px；文本对齐：中心这是jQuery/p/div div style=' background-image : URL(timg . jpg)实现的上下滚动公告牌；余量margin:15px 90px 0 90px填充-left : 310 px；' height: 600px'div style='position:相对；高度：26px；'隐藏飞越：'Ul class=' ul1老师：求求你嫁给我/li liK:等你老了，我还是会背着你/li liK:我会成为你的拐杖/li liK:等你没牙了，我会嚼碎喂给你/Li/ul img style=' position 3360 absolute；top: 9pxleft : 20px ' width=' 15px ' height=' 15px ' src=' http : laba . png '/div/div script type=' text/JavaScript ' $(function(){ var num=$(. ul1 ')。查找(' li ')。长度；Console.log('直接运行' num)；if(num 1){ SetInterval(function(){ $(. ul1 '))。animate({ marginto p : '-26px ' }，500，function(){ $(this)。css({marginTop : '0'})。find('li:first ')。appendTo(这个)；});}, 3000);} });/脚本/正文/html摘要

以上就是边肖介绍的jQuery上下滚动公告牌的详细代码，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！