【问题标题】:jQuery custom content scroller traversed path styling :)jQuery 自定义内容滚动器遍历路径样式:)
【发布时间】:2014-07-29 20:47:26
【问题描述】:

我使用jQuery custom content scroller 创建自定义内容滑块,我需要设置其拖动器的样式。例如,如果我将它拖到一半 - 在红色(任何颜色)轨迹后面。反之亦然。感谢您的任何建议)

例如

(function($){
        $(window).load(function(){

            $("#content-1").mCustomScrollbar({
                axis:"x",
                advanced:{
                    autoExpandHorizontalScroll:true
                }
            });

            var i=1,
                imgs=["http://placehold.it/500x300.jpg","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300"];

            $("a[rel='add-content']").click(function(e){
                e.preventDefault();
                var markup="<li id='img-"+i+"-container'><img src='"+imgs[i]+"' /></li>";
                $(".content .mCSB_container ul").append(markup);
                if(i<imgs.length-1){
                    i++
                }else{
                    i=0;
                }
            });

            $("a[rel='remove-content']").click(function(e){
                e.preventDefault();
                if($(".content .mCSB_container ul li").length<4){return;}
                i--
                if(i<0){i=imgs.length-1;}
                $("#img-"+i+"-container").remove();
            });

        });
    })(jQuery);

这里是JsFiddle DEMO

【问题讨论】:

    标签: javascript jquery css mousewheel custom-scrolling


    【解决方案1】:

    希望对你有用。

    callbacks:{
                        whileScrolling: function(){
                            if(!$('.pathScrolled').length){$('.mCSB_scrollTools .mCSB_draggerRail').prepend('<div class="pathScrolled">');                                                         }
    $('.pathScrolled').css({width: this.mcs.draggerLeft});
                        }
                    }
    

    JsFiddle

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-05-21
      • 1970-01-01
      • 1970-01-01
      • 2020-09-18
      相关资源
      最近更新 更多