Question

很可能没有人在周末的周末回答这个问题......

使用jquery mobile beta和jquery mobile Scrollview 插入。有5个div由scrtollview插件重新编辑，它们成功地以旋转木马的方式绘制，并排成5个div ...

           <div class="scrollme" data-scroll="x">
              <div class="indDiv"> one
                </div>
              <div  class="indDiv"> two
                </div>
              <div class="indDiv"> three
                </div>
              <div class="indDiv"> four
                </div>
              <div class="indDiv"> five
                </div>                              
            </div>


$('div.indDiv').bind('tap', function(e){
  var clickedDiv = $(this);
  // snap clickedDiv to the middle of the page
});

我有这个要求，当我点击这个旋转木马里面的一个div时，我想要以编程方式移动corousel，以便将抽头的div移动到屏幕的中间。我没有看到与scrollview插件方法有关的方法...我也可以灵活地切换到另一个插件... 任何人??

由于

Answer 1

大多数情况下，由于位置：相对/绝对问题，这涉及在文档正文的末尾附加内容。

我写了一个简单的插件，允许居中和着色......它可能不是生产质量，但我已经对它感到满意了一段时间。

(function($) {
    $.fn.center = function() {
        this.css("position", "absolute");
        this.css("top", (($(window).height() * .4) - this.height()) / 2
                + $(window).scrollTop() + "px");
        this.css("left", ($(window).width() - this.width()) / 2
                + $(window).scrollLeft() + "px");
        return this;
    }

    var shade = 0;
    $.fn.unshade = function() {
        $('.shade:last').remove();
        var $children = $('.shade-front:last').children();
        $children.each(function(k, v) {
            if ($.data(v, 'shade-replace-previous').size() != 0) {
                $.data(v, 'shade-replace-previous').append(v);
            } else {
                $.data(v, 'shade-replace-parent').prepend(v);
            }
        });
        $('.shade-front:last').remove();
        return $children;
    }

    $.fn.shade = function(css) {
        var $shade = $('<div class="shade"/>');
        $shade.css( {
            position : "absolute",
            width : '100%',
            height : '100%',
            top : 0,
            left : 0,
            background : "#000",
            opacity : .7
        })
        $shade.click(function() {
            $(this).unshade();
        })
        $('body').append($shade);

        // Record our element's last position
        this.each(function(k, v) {
            var $this = $(v);
            var prev = $this.prev();
            var par = $this.parent();
            $.data(v, 'shade-replace-previous', prev);
            $.data(v, 'shade-replace-parent', par);
        });

        // Add them to the shadefront
        var $shade_front = $('<div class="shade-front"/>');
        $shade_front.css("background", "#FFF");
        $shade_front.css("margin", "auto");
        $shade_front.css("text-align", "center");
        if (css) {
            $shade_front.css(css);
        }
        $shade_front.append(this);
        $shade_front.center();
        $('body').append($shade_front);
        return $shade_front;
    }

})(jQuery);

Answer 2

我正在使用此插件，然后将swiperight / left绑定到下一个/ prev按钮。

https://github.com/Wilto/Dynamic-Carousel

使用scrollview将div捕捉到屏幕中间

2 个答案: