Question

我有一个div位置relative，ul位置absolute。

我想要点击右键，一个li附加到ul并且根据li尺寸向右移动;它在FF中工作，但在chrome和IE中，所有li都贴在页面右侧，并且不显示任何li。

我的问题在哪里？（我写了一个滑块，当点击右键时这个子喷射）

$(_rightNavigator).click(function () {
  var _number = $("#thumbviewer").children("li:last").index() + 1;
  if (_number <= settings.imgAddress.length) {
    $("#thumbviewer").append("<li><a href='#'><img class='loading thumb' src=" + settings.imgAddress[_number] + " width='120' height='120' /></a></li>");
    $("#thumbviewer li").css("margin-left", Math.floor(($(settings.photoViewerId).width() - ($("#thumbviewer li").width() * _removeCount)) / _removeCount)); //it's return margin size for any li
    $("#thumbviewer").animate({
      left: '+=' + $("#thumbviewer li").outerWidth(true) + 'px'
    }, 1000);
  }
});

我的CSS代码

img { 
  border:none; 
}
#thubmviewer-holder { 
  position:relative !important;
  height: 132px; 
  border: 3px solid #808080; 
  overflow: hidden
}
.photoviewer{ 
  text-align:center;
  min-height:300px; 
}
.thumbviewer { 
  position:absolute;
  padding:0 5px 0 0;
  margin:0;
  text-align:center;
  border:1px solid red; 
}
.thumbviewer li { 
  list-style:none;
  border:1px solid blue;
  float:right
}
.thumbviewer li a { 
  text-decoration:none;
  float:right;
  padding:4px 2px;
  margin:0;
}
.thumbviewer li a img{
  border:2px solid #808080;
  border-radius:5px;
}
.loading{
  background:url('images/loading.gif') no-repeat center center;
  min-height:300px;
}
.thumb{
  width:120px;
  min-height:120px !important;
}
.left-nvg{      
  display:none;
  background:url('images/arrows.png') no-repeat -7px  -7px;
  width:36px;
  height:36px;
  cursor:pointer
}
.right-nvg{
  display:none;
  background:url('images/arrows.png') no-repeat -57px -7px;
  width:36px;
  height:36px;
  cursor:pointer
}
.right-nvg:hover{
  background-position: -57px -57px;
}
.left-nvg:hover{
  background-position: -7px -57px;
}


<div id="thumbviewer">
        <ul id="thumbviewer" class="thumbviewer" style="width: 2160px; left: 145px;">
            <li style="margin-left: 15px;"><a href="#">
                <img class="loading thumb" src="../Uploades/Img/Tulips.jpg" width="120" height="120"></a></li>
            <li style="margin-left: 15px;"><a href="#">
                <img class="loading thumb" src="../Uploades/Img/Koala.jpg" width="120" height="120"></a></li>
</ul>

在Chrome中动画jquery时ul li的位置

0 个答案: