xml地图|网站地图|网站标签 [设为首页] [加入收藏]

软件资讯

当前位置:美高梅游戏网站 > 软件资讯 > jQuery无缝滚动插件

jQuery无缝滚动插件

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-09-04 02:11

 

插件代码

/**

图片 1;(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();

* 因网站需要写了这个"jq插件",我也不清楚符不符合jq插件的标准,反正是能用了^^^

示例二:左滚动

*

<!-- 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});

* 显示列表项时使用的效果是jq的fadeIn,如果想定制这个行为,执行以下代码

 

*     rollbar.setShowHandler(function(currentItem){}); 

 

*  其中currentItem是将要显示的元素的jq对象实例

;( function ($) { // jQuery marquee 插件 $.fn.marquee = function (options) { // 默认设置 var defaults = { derection: "top" , interval: 50 }; // 合并后的参数设...

*

* 通过调用$.rollbar.get(containerId)  获得与此containerId(不需要#)绑定的rollbar,如果不存在,则返回null

*

* 使用方法:

* $(function(){            

   

    // 参数含义: "rollbar" -> 列表项容器的id(不需要#)

    //           "item"   -> 列表项的class(如<li class='item' ></li>)

    //           3000     -> 滚动时间间隔,单位毫秒

    //           "current" -> 显示元素的额外的class,每条正在显示的元素都将包含此class

    var rollbar = $.rollbar.start("rollbar","item","current",3000);  // 调用之后,滚动就启动了

   

   

    $("#roll-button-prev").click(function(){

        rollbar.prev();    // 显示上一条

本文由美高梅游戏网站发布于软件资讯,转载请注明出处:jQuery无缝滚动插件

关键词:

上一篇:美高梅游戏网站如何解决Ajax跨域问题-1

下一篇:没有了