使用滚动视图将 div 捕捉到屏幕中间

Question

可能没有人在一个长周末的星期五回答这个问题......

使用 jquery mobile beta 和 jquery mobile Scrollview 插入。 scrtollview 插件重新渲染了 5 个 div，并以轮播方式成功绘制了 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 捕捉到屏幕的中间。我看不到使用滚动视图插件方法的方法...我也可以灵活地切换到另一个插件... 有人吗？？

谢谢

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

我正在使用这个插件，然后将向右/向左滑动绑定到下一个/上一个按钮。

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