marquee插件水平滚动字幕循环滚动

今天药忘吃喽~ 2022-06-10 13:24 242阅读 0赞

效果图：  
![这里写图片描述][SouthEast]  
demo及插件下载链接：  
[http://download.csdn.net/download/vlilyv/9942169][http_download.csdn.net_download_vlilyv_9942169]  
一般广告，通知，中奖信息等在头部滚动向左滚动使用marquee插件，配合jquery使用  
比较简单，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平滚动字幕循环滚动一般配合后台数据</title>
        <style> .scroll-bar { height: 40px; line-height: 40px; overflow: hidden; font-size: 16px; background: #ccc; } #marquee{ margin: 0; padding: 0; } #marquee li{ display: inline-block; } </style>
    </head>
    <body>
    <section class="scroll-bar" id="scrollText">
        <ul id="marquee">
            <li>13*****3632&nbsp抽取积分1000分</li>
        </ul>
    </section>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.marquee.min.js"></script> 
    <script> $(function(){ $("#marquee").marquee({ duration: 10000,//时间 gap: 100,//间距 delayBeforeStart: 0,//开始滚动延迟时间 direction: 'left',//滚动方向 duplicated: true,//是否循环播放 }); }) </script>
    </body>
    </html>

[SouthEast]: /images/20220610/bebb9f537e9b4974be4358db574391c5.png
[http_download.csdn.net_download_vlilyv_9942169]: http://download.csdn.net/download/vlilyv/9942169

发表评论取消回复

表情：

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

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

相关阅读

相关 vue循环滚动字幕

在Vue.js中创建一个循环滚动字幕的效果通常需要使用一些CSS和JavaScript来实现。以下是一个简单的示例，展示如何使用Vue.js创建一个循环滚动字幕的效果：首先

怼烎@/ 2024年03月02日 09:36/ 0 赞/ 7 阅读

相关 marquee 滚动字幕

滚动字幕： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

刺骨的言语ヽ痛彻心扉/ 2023年10月06日 08:59/ 0 赞/ 24 阅读

相关 Android滚动字幕公告控件

Android滚动字幕公告控件效果 Gradle 使用属性地址效果字体长度过大滚动字体，结束

Dear 丶/ 2022年09月17日 06:26/ 0 赞/ 272 阅读

相关 marquee无缝滚动

marquee无缝滚动利用i5scroll进行二次封装 > 为了满足工作需求进行二次封装 ~(function ($, window, document,

布满荆棘的人生/ 2022年08月30日 11:39/ 0 赞/ 206 阅读

相关 Marquee 滚动的效果

先制作向上滚动的效果：　　插入代码：  <div id="demo" style="overflow:hidden;heigh

分手后的思念是犯贱/ 2022年08月06日 03:14/ 0 赞/ 213 阅读

相关 marquee插件水平滚动字幕循环滚动

效果图： ![这里写图片描述][SouthEast] demo及插件下载链接： [http://download.csdn.net/download/vlilyv/

今天药忘吃喽~/ 2022年06月10日 13:24/ 0 赞/ 243 阅读

相关 HTML滚动字幕

<marquee scrollAmount="2" width="300">yu.hiretianxia.cn</marquee> 各参数详解： a、scroll

傷城~/ 2022年02月26日 06:16/ 0 赞/ 366 阅读

相关连续滚动字幕

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <t

蔚落/ 2021年12月16日 09:45/ 0 赞/ 352 阅读

相关 python 滚动字幕

写在前面：最近学python，爬虫方面感兴趣，顺便还可以了解下人工智能吧。下面是两种方式做滚动字幕，直接贴代码了： 1.第一种： 1 import tim

àì夳堔傛蜴生んèń/ 2021年11月17日 01:32/ 0 赞/ 486 阅读

相关 HTML标签marquee(实现滚动字幕)

今天学习一个标签---marquee，认识这个单词的人应该知道这个单词的意思是跑马灯。但其实在H5中这个标签的语义是滚动字幕。 marquee标签并不是W3C官方推荐的标

太过爱你忘了你带给我的痛/ 2021年10月24日 03:11/ 0 赞/ 770 阅读