jquery 消息上下滚动

浪迹之水

于 2022-08-08 20:29:05 发布

阅读量370

点赞数

分类专栏：笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/u012197726/article/details/126235387

版权

jQuery 消息滚动动画效果前端开发 DOM操作

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jquery 消息上下滚动

在这里插入图片描述

查看效果：https://www.jq22.com/webqd74

<div id="broadcast" class="bar" name="giftactive">
  <div style="float:left"><strong>间隔滚动效果：</strong></div>
  <div id="demo" style="overflow:hidden;height:22px;line-height:22px;">
    <ul class="mingdan" id="holder">
      <li><a href="#" target="_blank">aaaaaa</a></li>
      <li><a href="#" target="_blank">bbbbbb</a></li>
      <li><a href="#" target="_blank">cccccc</a></li>
      <li><a href="#" target="_blank">dddddd</a></li>
      <li><a href="#" target="_blank">eeeeee</a></li>
    </ul>
  </div>
</div>

li{ list-style-type: none; }

function AutoScroll(obj) {
    $(obj).find("ul:first").animate({
        marginTop: "-22px"
    },
    500,
    function() {
        $(this).css({
            marginTop: "0px"
        }).find("li:first").appendTo(this);
    });
}
$(document).ready(function() {
    setInterval('AutoScroll("#demo")', 1000)
});