一个文字无缝滚动的jQuery插件

最新推荐文章于 2024-02-02 11:31:24 发布
cpytiger
最新推荐文章于 2024-02-02 11:31:24 发布
阅读量5.2k
点赞数
分类专栏： jquery 文章标签：文字滚动 jQuery插件
本文链接：https://blog.csdn.net/cpytiger/article/details/23464295
版权
jquery 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
直接上代码吧
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>marquee插件--滚动示例</title>
    <link type="text/css" href="http://888.gtimg.com/css/v1.0/qqcaipiao/cp_party_effect.css" rel="stylesheet"/>
    <style type="text/css">
        #mar1 { height: 120px; width: 200px; margin-top: 20px; margin-left: 20px; background: #333; color: #FFF; }
        #mar2 { height: 120px; width: 200px; margin-top: 20px; margin-left: 20px; background: #333; color: #FFF; }
        #mar3 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #06F; color: #FFF; }
        #mar4 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #06F; color: #FFF; }
        #mar5 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #F66; color: #FFF; }
        #mar6 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #F66; color: #FFF; }
    </style>
</head>

<body>
<div id="mar1">
    <ul>
        <li>测试数据第一条</li>
        <li>测试数据第二条</li>
        <li>测试数据第三条</li>
        <li>测试数据第四条</li>
        <li>测试数据第五条</li>
        <li>测试数据第六条</li>
    </ul>
</div>
<div id="mar2">
    <ul>
        <li>测试数据第一条</li>
        <li>测试数据第二条</li>
        <li>测试数据第三条</li>
        <li>测试数据第四条</li>
        <li>测试数据第五条</li>
        <li>测试数据第六条</li>
    </ul>
</div>
<div id="mar3">
    <ul>
        <li>测试数据第一条</li>
        <li>测试数据第二条</li>
        <li>测试数据第三条</li>
        <li>测试数据第四条</li>
        <li>测试数据第五条</li>
    </ul>
</div>
<div id="mar4">
    <ul>
        <li>测试数据第一条</li>
        <li>测试数据第二条</li>
        <li>测试数据第三条</li>
        <li>测试数据第四条</li>
        <li>测试数据第五条</li>
    </ul>
</div>
<div id="mar5">
    <ul>
        <li>测试数据第一条</li>
        <li>测试数据第二条</li>
        <li>测试数据第三条</li>
        <li>测试数据第四条</li>
        <li>测试数据第五条</li>
    </ul>
</div>
<div id="mar6">
    <ul>
        <li>测试数据第一条</li>
        <li>测试数据第二条</li>
        <li>测试数据第三条</li>
        <li>测试数据第四条</li>
        <li>测试数据第五条</li>
    </ul>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    /**
　　　* @author xf.radish
     * jQuery插件 常用效果的实现
     */
    (function (jQuery) {
        jQuery.fn.extend({
            /**
             *@description 无缝滚动 支持匀速上下左右和垂直翻滚上下
             *@param {
              *      direction:string,//滚动方向 值域：top|left|bottom|right|up|down
             *      speed:string//滚动速度（垂直翻滚时为停留时间）
             * } o
             *@example
             *HTML结构
             *<div id="mar">
             *    <ul>
             *        <li>内容1</li>
             *        <li>内容2</li>
             *        <li>内容3</li>
             *    </ul>
             *</div>
             *mar样式应该包含height,width,background等 注意不要覆盖了插件附加上去的样式
             *调用：
             *jQuery("#mar").marquee({
             *    direction:"top",
             *    speed:30
             *})
             *
             */
            marquee:function (o) {
                var it = this,
                        d = o.direction || 'left', //滚动方向 默认向左
                        s = o.speed || 30, //速度 默认30毫秒
                        mar = jQuery(it),
                        mp1 = jQuery(it).children(0).attr({id:"mp1"}),
                        marqueeFunc = getMarquee(d),
                        marRun = marqueeFunc ? setInterval(marqueeFunc, s) : function () {
                            return false;
                        };//开始滚动
                //鼠标悬停事件
                jQuery(it).hover(function () {
                    clearInterval(marRun);
                }, function () {
                    marRun = setInterval(marqueeFunc, s);
                })
                /*生成滚动函数
                 *1.判断方向 *2.装载CSS *3.判断需不需要滚动 *4.构造函数
                 */
                function getMarquee(d) {
                    var marqueeFunc;
                    switch (d) {
                        //水平向左
                        case "left":
                            mar.addClass("plus-mar-left");
                            var liHeight = mar[0].offsetHeight;
                            mar.css({"line-height":liHeight + "px"});
                            if (mp1[0].offsetWidth < mar[0].offsetWidth) return false;
                            mp1.clone().attr({id:"mp2"}).appendTo(mar);
                            marqueeFunc = function () {
                                if (mar[0].scrollLeft >= mp1[0].scrollWidth) {
                                    mar[0].scrollLeft = 0;
                                } else {
                                    mar[0].scrollLeft++;
                                }
                            }
                            break;
                        //水平向上
                        case "top":
                            mar.addClass("plus-mar-top");
                            if (mp1.outerHeight() <= mar.outerHeight()) return false;
                            var mp2 = mp1.clone().attr({id:"mp2"}).appendTo(mar);
                            marqueeFunc = function () {
                                var scrollTop = mar[0].scrollTop;
                                if (mp1[0].offsetHeight > scrollTop) {
                                    mar[0].scrollTop = scrollTop + 1;
                                } else {
                                    mar[0].scrollTop = 0;
                                }
                            }
                            break;
                        //水平向右
                        case "right":
                            mar.addClass("plus-mar-left");
                            var liHeight = mar[0].offsetHeight;
                            mar.css({"line-height":liHeight + "px"});
                            if (mp1[0].offsetWidth <= mar[0].offsetWidth) return false;
                            var mp2 = mp1.clone().attr({id:"mp2"}).appendTo(mar);
                            marqueeFunc = function () {
                                if (mar[0].scrollLeft <= 0) {
                                    mar[0].scrollLeft += mp2[0].offsetWidth;
                                } else {
                                    mar[0].scrollLeft--;
                                }
                            }
                            break;
                        //水平向下
                        case "bottom":
                            mar.addClass("plus-mar-bottom");
                            if (mp1[0].offsetHeight <= mar[0].offsetHeight) return false;
                            var mp2 = mp1.clone().attr({id:"mp2"}).appendTo(mar);
                            mar[0].scrollTop = mar[0].scrollHeight;
                            marqueeFunc = function () {
                                if (mp1[0].offsetTop >= mar[0].scrollTop) {
                                    mar[0].scrollTop += mp1[0].offsetHeight;
                                } else {
                                    mar[0].scrollTop--;

                                }
                            }
                            break;
                        //垂直翻滚 向上
                        case "up":
                            mar.addClass("plus-mar-up");
                            var liHeight = mar[0].offsetHeight;
                            mp1.css({"line-height":liHeight + "px"});
                            marqueeFunc = function () {
                                var currLi = it.eq(0).find("ul:first");
                                currLi.animate({
                                    marginTop:-liHeight
                                }, 500, function () {
                                    currLi.find("li:first").appendTo(currLi);
                                    currLi.css({marginTop:0});
                                })
                            }
                            break;
                        //垂直翻滚 向下
                        case "down":
                            mar.addClass("plus-mar-down");
                            var liHeight = mar[0].offsetHeight,
                                    liLength = mp1.children().length,
                                    topInit = -(liLength - 1) * liHeight + "px";
                            mp1.css({"top":topInit, "line-height":liHeight + "px"});
                            marqueeFunc = function () {
                                var currLi = it.eq(0).find("ul:last");
                                currLi.animate({
                                    marginTop:liHeight
                                }, 500, function () {
                                    currLi.find("li:last").prependTo(currLi);
                                    currLi.css({marginTop:0});
                                })
                            }
                            break;
                        default:
                        {
                            marqueeFunc = null;
                            alert("滚动插件：传入的参数{direction}有误！");
                        }
                    }
                    return marqueeFunc;
                }
            }
        })
    })(jQuery);

    $("#mar1").marquee({
        direction:"top",
        speed:30
    });

    $("#mar2").marquee({
        direction:"bottom",
        speed:30
    });

    $("#mar3").marquee({
        direction:"right",
        speed:30
    });

    $("#mar4").marquee({
        direction:"left",
        speed:30
    });

    $("#mar5").marquee({
        direction:"down",
        speed:2000
    })
    $("#mar6").marquee({
        direction:"up",
        speed:3000
    });
</script>
</body>
</html>