码迷,mamicode.com
首页 > Web开发 > 详细

jQuery无缝滚动插件

时间:2014-06-24 09:25:58      阅读:361      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   http   tar   

插件代码

bubuko.com,布布扣
;(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});

 

 

jQuery无缝滚动插件,布布扣,bubuko.com

jQuery无缝滚动插件

标签:style   class   blog   code   http   tar   

原文地址:http://www.cnblogs.com/xiankui/p/3799330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!