首页 > 代码库 > jQuery无缝滚动插件

jQuery无缝滚动插件

2024-07-08 23:27:15   225人阅读

插件代码

;(function ($) {    // jQuery marquee 插件    $.fn.marquee = function (options) {        // 默认设置        var defaults = {            derection: "top",            interval: 50        };                // 合并后的参数设置        var options = $.extend(defaults, options);        var $mar = $(this),             original = $mar.children().first(),             clone = original.clone(),             height = original.height(),             width = original.width(),             i = 0,             tId = null;  // 唯一的tId，可以通过clearTimeout(tId)清除干净                // append clone to marquee        $mar.append(clone);        // scrolltop        var scrolltop = function () {            if (i < height) {                $mar.scrollTop(i++);            } else {                i = 0;                $mar.scrollTop(0);            }            tId = setTimeout(scrolltop, options.interval);        };                // scrollbottom        var scrollbottom = function () {                        if (i === 0) {                i = height;                $mar.scrollTop(i);            } else {                $mar.scrollTop(i--);            }            tId = setTimeout(scrollbottom, options.interval);        };        // scrollleft        var scrollleft = function () {                        if (i < width) {                $mar.scrollLeft(i++)            } else {                i = 0;                    $mar.scrollLeft(0);            }            tId = setTimeout(scrollleft, options.interval);        };        // scrollright        var scrollright = function () {                        if (i === 0) {                $mar.scrollLeft(width);                i = width;            } else {                $mar.scrollLeft(i--);            }            tId = setTimeout(scrollright, options.interval);        };        // scroll to which derection        var scrollto = {            top: scrolltop,            bottom: scrollbottom,            left: scrollleft,            right: scrollright        };                // 根据参数选择滚动函数        tId = setTimeout(scrollto[options.derection], options.interval);        // when mouse hover clearTimeout or setTimeout        $mar.hover(function () {            clearTimeout(tId);        }, function () {            tId = setTimeout(scrollto[options.derection], options.interval);        });    };})(jQuery);
View Code

示例一：上滚动（默认）

<!-- html code --><div class="marquee">    <ul>        <li>滚动吧少年</li>        <li>滚动吧少年</li>        <li>滚动吧少年</li>        <li>滚动吧少年</li>        <li>滚动吧少年</li>        <li>滚动吧少年</li>        <li>滚动吧少年</li>    </ul>    </div>
/*  css code  */.marquee{    border:1px solid #0a0;    width:300px;    height:100px;    overflow:hidden;}.marquee li{    font-size:16px;    line-height:1.5;}
// js code：插件应用$(".marquee").marquee();

示例二：左滚动

<!-- html code --><div class="marquee2">    <ul>        <li>滚动吧少年</li>        <li>滚动吧少年</li>        <li>滚动吧少年</li>        <li>滚动吧少年</li>        <li>滚动吧少年</li>        <li>滚动吧少年</li>        <li>滚动吧少年</li>    </ul>    </div>
/* css code */.marquee2{    width:300px;    height:25px;    border:1px solid #00a;    overflow:hidden;    white-space: nowrap;  /* 文字超出时不换行！！ */}.marquee2 ul, .marquee2 li{    display:inline;    font-size:16px;    line-height:25px;}
// js code：插件应用$(".marquee2").marquee({derection: "left", interval: 25});

 

 


联系
我们