Question

我有一个新闻滚动条，它是通过将数组中的li附加到ul元素而创建的。我通过以下函数滚动它：

$newsItem = $('.news-item');

function newsScroll() {
  $newsItem.eq(currentNewsItem).fadeIn(1000);
  setTimeout(function() {
    $newsItem.eq(currentNewsItem).addClass('move-left');
  }, 2000);
}

它将.move-left类添加到li，其中.move-left具有CSS规则：

.move-left {
  -webkit-transition: 5s;
  -moz-transition: 5s;
  -ms-transition: 5s;
  -o-transition: 5s;
  transition: 5s;
  left: -400px;
}

问题是所有新闻项目的长度不一样;其中一些超过了400px。因此，将它们向左移动400px，不会将它们滚出滚动条的显示。

所以我使用下面的代码来确定这些元素中最长的元素的宽度，但是我不确定如何将它附加到类.move-left，或者如何修改不属于它的类DOM。

var moveLeftAmt = Math.max.apply(null, $('ul#newsScroller li').map(function() {
  return $(this).outerWidth(true);
}).get());

有什么建议吗？

Answer 1

可能你可以这样做：

var moveLeftAmt = Math.max.apply(null, $('ul#newsScroller li').map(function() {
return $(this).outerWidth(true);
}).get());

因此，使用上面的代码，您将获得moveLeftAmt中的最大宽度，然后使用以下代码将其作为内联css应用于元素：

$newsItem.eq(currentNewsItem).css('left',moveLeftAmt);

OR

$newsItem.eq(currentNewsItem).attribute('style',"left:"+moveLeftAmt+"px;");  // Appended `px` after the variable.

Answer 2

部分基于@HimanshuUpadhyay的建议，我通过attr函数更改了body标签的样式，包括CSS var，如下所示：

$('body').attr('style',"--amtLeft:"+moveLeftAmt);

然后我在样式表中引用了它：

.move-left {
  -webkit-transition: 5s;
  -moz-transition: 5s;
  -ms-transition: 5s;
  -o-transition: 5s;
  transition: 5s;
  left: var(--amtLeft) !important;
}

像魅力一样！

我应该注意到

var moveLeftAmt = Math.max.apply(null, $('ul#newsScroller li').map(function() {
  return $(this).outerWidth(true);
}).get());

只返回一个数字，所以要以这种方式使用它，我必须声明另一个将"px"添加到结尾的变量。

操纵DOM加载后要添加的类的CSS

2 个答案: