水平滑動 - 定義開始和結束

我有一個div一個水平滑動（使用相對定位），看起來像這樣：水平滑動 - 定義開始和結束

enter image description here

它滑出左，右據此，但我有問題使其停止在兩個啓動和幻燈片容器的底，所以它最終是這樣的：

enter image description here

這裏的JS（jQuery的）：

$('.timeline-nav').on('click', function() { 

    if (!anim) 
    { 
     anim = true; 

     var pos = $(this).hasClass('left') ? 320 : -320; 

     pos = parseInt($('.timeline-content-wrapper').css('left')) + pos; 

     $('.timeline-content-wrapper').animate({'left': pos}, 600, function() { 
      anim = false; 
     }); 
    } 

    return; 
});

編輯：live example

來源

2012-11-29 yoda

能否請您發表您的演示？ –

@MMTac後更新 – yoda

@yoda該網站被封鎖在我的工作場所：C一的jsfiddle的任何機會呢？ –

看到這一切在這裏工作：

http://jsfiddle.net/yUe23/1/

我已經改變了一些類（時間軸的內容包裝）到IDS和想象它周圍（時間軸內容面罩）

var anim=false; 
var pos=0; 
var originalPos=0; 

$(function() { 

    originalPos=$('#timeline-content-wrapper').offset().left; 


    $('.timeline-nav').click(function() { 

     if (!anim) { 

      var $wrapper=$('#timeline-content-wrapper'); 
      var $mask=$('#timeline-content-mask');   

      var pos = $(this).hasClass('left') ? 200 : -200; 
      var wid=$wrapper.width(); 
      var maskWid=$mask.width(); 
      var oldPos=$wrapper.offset().left; 

      anim = true; 

      // alert(parseInt($wrapper.offset().left)+" "+pos+" "+originalPos+" "+originalPos+" "+wid+" "+maskWid); 

      pos = parseInt($wrapper.offset().left)-originalPos + pos; 

      if(pos<-wid+maskWid) pos=-wid+maskWid; 
      else if(pos>0) pos=0; 

      $wrapper.animate({'left': pos}, 600, function() { 
       anim = false; 
      }); 

     } 

     return; 
    }); 


});

一些HTML

來源

2012-11-29 09:36:18 FrancescoMM

乾杯隊友，它的工作:) – yoda

如何：

pos = Math.min(parseInt($('.timeline-content-wrapper').css('left')) + pos, 0);

我假設包裝DIV是不是應該有一個積極的左值。

來源

2012-11-29 09:23:35

沒有工作.. – yoda

pos = parseInt($('.timeline-content-wrapper').css('left')) + pos; 
if (pos < -1120) pos = -1120; 
if (pos > 0) pos = 0;

該代碼可能會更短，但這更容易理解:)。第一，如果依賴於元件的寬度;也許你需要去改變它或在運行時計算。

來源

2012-11-29 09:23:59 looper

計數的子元素的寬度並沒有給我應有的價值，但是你貢獻給了我提示到那裏，+1 – yoda

在小提琴：http://jsfiddle.net/ktszm/5/

 var max_width = 250;  
     var width_of_viewport = 200;    
     var stopper = max_width - width_of_viewport; 
     var container_position = $('.timeline-content-wrapper').position().left; 



     if(container_position == 0 && $(this).hasClass('left')) 
     { 
      pos = 0; 
     } 
     else if(container_position == (stopper*-1) && !$(this).hasClass('left')) 
     { 
      pos = 0; 
     } 
     else 
     { 
      $('.timeline-content-wrapper').animate({'left': '+='+pos}, 600, function() { 
       anim = false; 
      }); 
     } 
    }

來源

2012-11-29 09:55:50 Karan

不工作... – yoda

我的壞。現在檢查。 – Karan

水平滑動 - 定義開始和結束

回答

相關問題