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

最新推荐文章于 2021-06-01 07:50:19 发布

VLilyV

最新推荐文章于 2021-06-01 07:50:19 发布

阅读量1.8k

点赞数

分类专栏： jquery javascript 文章标签：插件 jquery 滚动条

本文链接：https://blog.csdn.net/VLilyV/article/details/77429717

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

效果图：
这里写图片描述
demo及插件下载链接：
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>

VLilyV

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
marquee插件水平滚动字幕循环滚动

效果图：一般广告，通知，中奖信息等在头部滚动向左滚动使用marquee插件，配合jquery使用比较简单，代码如下：html lang="en">head> meta charset="UTF-8"> title>水平滚动字幕循环滚动一般配合后台数据title> style> .scroll-bar { heigh
复制链接

扫一扫

专栏目录