js实现消息滚动效果

今天我就教大家做一个消息滚动的小功能。实现起来很简单。我自己也有点惊讶~哈哈

1.实现的中心思想如图所示：

2.appendTo()的方法用于移动图片。这个方法是先从父标签中删除标签，然后拼接到标签的后面，也就是为我们实现了remove()的方法。所以用这种方法是极好的~

3.然后将使用计时器。每次使用timer调用one方法，让ul一次执行一个动画，改变其页边距-顶值，然后在执行动画后将其页边距-顶更改为初始值；

4.触摸ul标签清除定时器。离开后，继续执行。

！doctype html lang=' en ' head meta charset=' utf-8 '标题滚动信息/标题样式* { margin : 0；划水：0；} .滚动框{ width: 400px高度： 200 px；border: 2px固体# 000；margin: 20px自动；飞越：隐藏；} .滚动框ul { list-style : none；宽度： 100%；高度： 100%；} .滚动框ul li{宽度： 100%；高度： 40px；盒子尺寸：边框盒子；线高： 40px；文本对齐：中心；}/style script src=' http :http://apps . bdimg.com/libs/jquery/2 . 1 . 4/jquery . min . js '/script script $(function(){//获取当前ul var $uList=$()。滚动框ul ')var timer=null；//触摸清除定时器列表。hover(function(){ clear interval(timer))；}，function () {//离开start timer timer=set interval(function(){ scroll list($ ulist)；},1000);}).触发器(' mouse leave ')；//自动触发触摸事件//滚动动画功能scrolllist(obj) {//获取当前Li var的高度scrollheight=$ ('ul li:first ')。高度()；//滚动出一里的高度：$ ulist。停止()。动画({margin top:-scrollheight}，600，function(){//动画完成后，将当前ulmarginTop设置为初始值0，然后将第一个li拼接到最后。$uList.css({marginTop:0})。find('li:first ')。appendo($ uList)；});} });/script/head dydiv class='卷轴盒' ulli1好消息！好消息！我们店里所有的商品都是免费的。好消息！好消息！我们店里所有的商品都是免费的2/李莉好消息！好消息！我们店里所有的商品都是免费的。好消息！好消息！我们店里所有的商品都是免费的4/li li好消息！好消息！我们店里所有的商品都是免费的。好消息！好消息！我们店里所有的商品都是免费的。好消息！好消息！我们店里所有的商品都是免费的。7/李莉8好消息！好消息！我们店里所有的商品都是免费赠送的。8/li /ul/div/body/html以上是本文的全部内容。希望这篇文章的内容能给大家的学习或工作带来一些帮助，也希望大家多多支持我们！