HTML+JS制作无限滚动广告代码

Dear 丶 2022-05-31 07:53 197阅读 0赞

<!DOCTYPE>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>滚动广告</title>
        <script src="jquery.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ui,li {
                list-style: none;
            }
            #news{
                height: 24px;
                overflow: hidden;
                width: 300px;
                border: solid 1px;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div id="news">
        <ul>
            <li>恭喜覃**获得法拉利一辆</li>
            <li>恭喜黄**获得戒指一枚</li>
            <li>恭喜董**获得创口贴一箱</li>
            <li>恭喜梁**获得哇哈哈一辆</li>
            <li>恭喜蓝**获得感冒药一辆</li>
        </ul>
    </div>
    <script>
        $(function() {
            var $this = $("#news");
            var scrollTimer;
            $this.hover(function() {
                clearInterval(scrollTimer);
            }, function() {
                scrollTimer = setInterval(function() {
                    scrollNews($this);
                }, 2000);
            }).trigger("mouseleave");
    
            function scrollNews(obj) {
                var $self = obj.find("ul");
                var lineHeight = $self.find("li:first").height();
    
                $self.animate({
                    "marginTop": -lineHeight + "px" }, 500, function() {
                    $self.css({
                        marginTop: 0
                    }).find("li:first").appendTo($self);
                })
            }
        })
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 90行代码，15个元素实现无限滚动

言在本篇文章你将会学到： * `IntersectionObserver API` 的用法，以及如何兼容。 * 如何在`React Hook`中实现无限滚动...

左手的ㄟ右手/ 2024年04月20日 00:12/ 0 赞/ 41 阅读

相关 Android无限循环轮播广告位Banner

Android无限循环轮播广告位Banner 现在一些app通常会在头部放一个广告位，底部放置一行小圆圈指示器，指示广告位当前的页码，轮播展示一些图片，这些图片

冷不防/ 2023年10月17日 08:44/ 0 赞/ 115 阅读

相关滚动广告php,【代码】随滚动条移动的层可以做成广告!

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="\_blank">http://www.w3.o

柔情只为你懂/ 2023年01月18日 15:23/ 0 赞/ 28 阅读

相关 jQ广告横向滚动

{ box-sizing: border-box; } .gunDong{ background-color: F4F4F

以你之姓@/ 2022年11月13日 04:20/ 0 赞/ 184 阅读

相关 JS+CSS 实现悬浮滚动广告

效果图思路代码效果图： ![这里写图片描述][20160728100844900] 思路：布局一个绝对布局的di

川长思鸟来/ 2022年09月24日 07:25/ 0 赞/ 233 阅读

相关 Jquery实现广告滚动

当页面的滚动条上下移动时，飘浮广告随着滚动条的滚动而上移或者下移，要明白两点，第一：放广告的层最好采用绝对定位，它的位置应该随着滚动条的改变而上下移动，滚动条的滚动促发的是on

向右看齐/ 2022年08月18日 02:45/ 0 赞/ 231 阅读

相关 HTML+JS制作无限滚动广告代码

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="te

Dear 丶/ 2022年05月31日 07:53/ 0 赞/ 198 阅读

相关制作niceScroll滚动条

1、引用jquery.js和jquery.nicescroll.js <script type="text/javascript" src="js/jquery.js

╰+攻爆jí腚メ/ 2022年05月13日 04:36/ 0 赞/ 234 阅读

相关利用RecyclerView实现无限轮播广告条

> 代码地址如下： > [http://www.demodashi.com/demo/14771.html][http_www.demodashi.com_demo_147

逃离我推掉我的手/ 2022年03月10日 08:50/ 0 赞/ 399 阅读

相关微信小程序滚动列表（无限滚动）

![20180507132001955][] 效果图1.0 实现方式是利用小程序原声组件swiper，方向设置为纵向：vertical=‘true’设置同时显示的滑块数

我就是我/ 2021年12月11日 14:23/ 0 赞/ 945 阅读