3

我正在尝试创建一个 100% 宽度/高度的内容“滑块”，它使用按钮以及锚链接来跳转到幻灯片。

我对 javascript 或 jquery 不是很好，所以我对这个有点学习曲线，但我已经让滑块在 Chrome 和 Firefox 中都可以工作，但 Safari 有很大的问题。下面的代码：

var $proj = $('div.project') //Cache your DOM selector
    visible = 1, //Set the number of items that will be visible
    indexProject = 0, //Starting index
    endIndexProject = 9; //End index 

$('.workR').click(function(){
     if(indexProject < endIndexProject ){
       indexProject++;
      $proj.animate({'left':'-=9.0909%'});
    }
});

$('.workL').click(function(){
     if(indexProject > 0){
       indexProject--;            
      $proj.animate({'left':'+=9.0909%'});

    }
});

/* sub project nav */


$("#one").click(function(e) {
    indexProject = 0;
    $proj.animate({'left':'0%'});    
});

$("#two").click(function(e) {
    indexProject = 1;
    $proj.animate({'left':'-9.0909%'});    
});

$("#three").click(function(e) {
    indexProject = 2;
    $proj.animate({'left':'-18.181334059343435%'});      
});

$("#four").click(function(e) {
    indexProject = 3;
    $proj.animate({'left':'-27.272243150252528%'}); 
});

$("#five").click(function(e) {
    indexProject = 4;
    $proj.animate({'left':'-36.363152241161615%'}); 
});

$("#six").click(function(e) {
    indexProject = 5;
    $proj.animate({'left':'-45.454143287515365%'});   
}); 

$("#seven").click(function(e) {
    indexProject = 6;
    $proj.animate({'left':'-54.544854594875545%'});
});

$("#eight").click(function(e) {
    indexProject = 7;
    $proj.animate({'left':'-63.63566105915084%'});
});

$("#nine").click(function(e) {
    indexProject = 8;
    $proj.animate({'left':'-72.72647748412166%'});
});

$("#ten").click(function(e) {
    indexProject = 9;
    $proj.animate({'left':'-81.81728394679116%'});
});

基本上所有的项目 div 都是一个非常长的 div 的一部分，并且在单击左右箭头时会按照它们的宽度移动。锚链接工作正常。

在第一张幻灯片上，单击右箭头重复进入第二张幻灯片，然后左箭头不会回到第一张幻灯片，而是进入空白屏幕，因为它现在位于 style="left: -72.72099260025185%;" 而不是回到零。

在第二张幻灯片上检查代码时，并不是所有幻灯片都以相同的百分比移动，它们都以略微不同的百分比移动。

如果有人能解释为什么这在 Safari 中不起作用并指出我正确的方向，将不胜感激！在我找到的答案中有点像一堵砖墙，并且真的不知道下一步该做什么。谢谢你。

编辑

好的，所以我现在知道动画百分比在 Safari 中是错误的，所以现在我知道是百分比导致了不稳定的行为。进一步挖掘让我了解了这段代码：

percent = 0.90909; 
add_width = (percent*$proj.parent().width())+'px';
$proj.animate({'left': '-='+add_width}, 500);

这有效，但显然在调整浏览器大小时表现得并不像我想要的那样。是否有任何解决方法可以使百分比在 Safari 中起作用，或者是否有一种方法可以使像素计算的东西只针对 Safari？意识到我可能在这里抓着稻草？！哈。

4

1 回答 1

0

我知道这个问题很老，但是由于没有人回答，我刚才在 Safari 中遇到了这个类似的问题......如果你的父容器是 100% 宽度并且该宽度与视口的大小相同（浏览器窗口宽度) ...那么你可以使用这个：

$proj.animate({'left': '-=100vw' }, 500); //Where 100vw is 100% of the viewport width.

如果您的父容器没有视口那么宽，您会遇到问题，但在大多数情况下，通过一些快速的数学运算，您可以弄清楚计算可能是什么。无论如何，您可以在这里找到更多有用的信息：http: //caniuse.com/#feat=viewport-units

于 2016-05-05T06:51:53.933 回答