您现在的位置是：网站首页 > 心得笔记

文字滚动效果marquee的插件使用

盛悦2019-05-29共724人围观
简介网站开发过程中，常常会看到再一个有限空间内，文字滚动出现，从而实现在有限空间内，多个广告宣传效果

1、使用

<script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.marquee.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#marquee").marquee(
                {yScroll: "bottom"}
            );

2、html

<ul id="marquee" class="marquee">
    <li><a href="https://blog.blonglee.me/notes/show?id=7BNgRnZWW7Zk194P" target="_blank">
            关系型数据库中的外键关系型数据库中的外键关系型数据库中的外键关系型数据库中的外键关系型数据库中的外键</a> [2019-05-24]</li>
    <li><a href="https://blog.blonglee.me/notes/show?id=AO497V03o50W51j3" target="_blank">
            瀑布流布局实现图片延迟加载特效</a> [2010-05-23]</li>
    <li><a href="https://blog.blonglee.me/notes/show?id=xaJgM8GxJ3vOB9Nn" target="_blank">
            clappr一个开源的Web网页播放器</a> [2010-05-16]</li>
</ul>

3、完整demo代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="marquee, jquery插件" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.marquee.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#marquee").marquee(
                {
                    yScroll: "top"//初始滚动方向 (还可以是"top" 或 "bottom")
                    ,showSpeed: 1000        // 初始下拉速度
                    , scrollSpeed: 50       // 滚动速度
                    , pauseSpeed: 500      // 滚动完到下一条的间隔时间
                    , pauseOnHover: true    // 鼠标滑向文字时是否停止滚动
                    , loop: -1              // 设置循环滚动次数 （-1为无限循环）
                    , fxEasingShow: "swing"  // 缓冲效果
                    , fxEasingScroll: "linear"  // 缓冲效果
                    , cssShowing: "marquee-showing"  //定义class

                    // event handlers
                    , init: null                // 初始调用函数
                    , beforeshow: null           // 滚动前回调函数
                    , show: null                 // 当新的滚动内容显示时回调函数
                    , aftershow: null            // 滚动完了回调函数
                }
                );
        });
    </script>
    <style type="text/css">
        .demo{width:420px; margin:20px auto;}
        ul.marquee{display: block;line-height: 1;position: relative;overflow: hidden;width: 400px;
            height: 22px; border:1px dotted #d3d3d3; background:#f7f7f7}
        ul.marquee li{position: absolute; top: -999em;left: 0;display: block;  line-height:20px;padding: 3px 5px;white-space: nowrap;  text-indent:0.8em;}
    </style>
</head>

<body>
<div id="main">
    <div class="demo">
        <ul id="marquee" class="marquee">
            <li><a href="https://blog.blonglee.me/notes/show?id=7BNgRnZWW7Zk194P" target="_blank">
                    关系型数据库中的外键关系型数据库中的外键关系型数据库中的外键关系型数据库中的外键关系型数据库中的外键</a> [2019-05-24]</li>
            <li><a href="https://blog.blonglee.me/notes/show?id=AO497V03o50W51j3" target="_blank">
                    瀑布流布局实现图片延迟加载特效</a> [2010-05-23]</li>
            <li><a href="https://blog.blonglee.me/notes/show?id=xaJgM8GxJ3vOB9Nn" target="_blank">
                    clappr一个开源的Web网页播放器</a> [2010-05-16]</li>
        </ul>
    </div>
</div>
</body>
</html>


jquery.marquee.js官网


上一篇：鼠标悬停按钮动画

下一篇：表单验证插件Validate总结