水平滑动 - 定义开始和结束

我有一个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

水平滑动 - 定义开始和结束

回答

相关问题