1

ユーザーが画像をクリックすると、divがスライドして画像が表示されるGoogle画像機能を複製しようとしています....

私が理解する必要があるのは、クリックされた画像のボックスの行の一番上までブラウザーをスライドさせる方法です。

ここに私が取り組んでいるラフドラフトへのリンクがあります

http://jsfiddle.net/m5sN5/2/

ここに現在のjsがあります

$('li').on('click', function(e){
  e.preventDefault();
  var active = $(this).siblings('.active');
  var posTop = ($(this).position()).top;
  if (active.length > 0) {
    var activeTop = (active.position()).top;
    if (activeTop == posTop) {
        $(this).find('.outer').finish().fadeIn('medium', function(){ 
            active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
        });

    } else {
        $(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
        $(this).find('.outer').finish().slideToggle();
    }
} else {
    $(this).find('.outer').finish().slideToggle();
}
$(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
  return false;
});

そのため、ユーザーがボックスをクリックすると、ブラウザはクリックされた行の一番上まで自動的にスライドします。

scrollTo などのさまざまなプラグインを使用してみましたが、スクロールするには特定の ID が必要なようです...レスポンシブ デザインを使用しているため、ユーザーのサイズ変更に応じて行の上部が変わる可能性があるため、これは困難ですブラウザ。

どんな考えでもいただければ幸いです

4

2 に答える 2

1

クリックハンドラー内でこれを試してください：

$('body').animate({scrollTop: $(this).offset().top},300);

これにより、アニメーションが実行され、 の scrollTop プロパティがbodyの一番上の位置に設定されthisます。これは、クリックされたリスト要素である必要があります。

于 2013-09-19T00:34:34.717 に答える
-1 
In this example I am appending the div after last element in the row.
**Here is my HTML**

<div class="container">
    <div class="box">0</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
</div>

**Here is my jQuery**

var container = $('.container');
var elements = container.children();
var oldWrapPos = 0;

$('.box').click(function(){
    container.children().removeClass('selected'); // reset selected element
    $(this).addClass('selected'); // mark new selected element
    $('.info-bg').remove(); // removing the prviously added div    
    $('.box').removeClass('edge');
    var selectedPos = $(this).index(); // get selected position
    // find wrap element:
    //var containerWidth = container.width();
    //var elementsInRow = Math.floor(containerWidth / 100 );
    var elementsInRow = 4; // use this if container's width is fixed
    var row = Math.floor(selectedPos / elementsInRow)+1;
    var wrapPos = (row * elementsInRow);

    // if selected is on last row, use as wrap the last element:
    var size = elements.length;
    if (wrapPos >= size){wrapPos = size;}
    wrapPos = wrapPos - 1;
    console.log(selectedPos);
    console.log(elementsInRow);
    var pointerPos = 40 + ((selectedPos % elementsInRow) * 110)
    console.log(selectedPos % elementsInRow);
    console.log((selectedPos % elementsInRow) * 110);
    console.log('left: '+pointerPos);
    console.log(size);
    // next line added by CrocoDillon, didn't do any cleanup of old calculations :P
    pointerPos = $(this).position().left + $(this).width() / 2 - 10;
    // end edit;
    if (wrapPos == oldWrapPos){
        $('.info-pc').css("left", pointerPos+'px');
        elements.removeClass('edge');
        $(elements[wrapPos]).addClass('edge');
        $('.info-bg').slideUp( function() { $(this).remove(); });
        $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:'
                         +pointerPos+'px"></div><div class="info-cl"></div></div>');
        $('.info-bg').slideDown();
    } else {
        oldWrapPos = wrapPos;
        elements.removeClass('edge');
        $(elements[wrapPos]).addClass('edge');
        $('.info-bg').slideUp( function() { $(this).remove(); });
        $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:'
                         +pointerPos+'px"></div><div class="info-cl"></div></div>');
        $('.info-bg').slideDown();
    }
});

$('html').click( function (e) { 
    if ( e.target == this )
        $('.info-bg').slideUp( function() { $(this).remove(); });
});

**Here is my CSS**

.container{
    width: 440px;
    margin: 0 auto;
    position: relative;
}

.info-bg{
    width: 430px;
    height: 70px;
    background-color: red;
    float:left;
    position: relative;
    margin: 5px;
    display: none;
}

.info-cl{
    height: 100%;
}

.info-pc{
    position:absolute;
    border-bottom: 10px solid red;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    width: 0;
    float: right;
    top: -10px;
}

.box{
    width:100px;
    height:170px;
    background-color: grey;
    float:left;
    margin:5px;
    font-size: 40px;
}

.edge{
    background-color:yellow;
}

.selected {
   background-color: red;

}

動作デモは次のとおりです。

http://jsfiddle.net/silpa/9wftgt6j/1/

于 2014-11-10T20:00:25.810 に答える