我正在尝试找出创建水平内容 slider 的更好方法(我说的是 CSS 部分)。当然最好使用 jQuery UI 或任何其他内容 slider ，所以我只是好奇如何更好地实现内容 slider 。你可以在下面看到我的几个解决方案。
HTML:
<body>
<div class="wrapper">
<div class="items">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
<div class="item">f</div>
<div class="item">g</div>
<div class="item">h</div>
<div class="item">i</div>
<div class="item">j</div>
</div>
</div>
<div class="slider"></div>
JavaScript:
$(function() {
$( ".slider" ).slider({
slide: function( event, ui ) {
$('.items').css('left', -ui.value * 4);
}
});
});
CSS，第一个变体:
.wrapper {
position: relative;
width: 300px;
height: 200px;
border: 1px black solid;
overflow: hidden;
}
.items {
position: absolute; /*here is the difference*/
width: 2000px;
}
.item {
margin: 5px;
display: inline-block;
border: 1px solid red;
width: 150px;
text-align: center;
font-size: 160px;
}
CSS，第二个变体:
.wrapper {
position: relative;
width: 300px;
height: 200px;
border: 1px black solid;
overflow: hidden;
}
.items {
position: inherit;
width: 2000px;
}
.item {
margin: 5px;
display: inline-block;
border: 1px solid red;
width: 150px;
text-align: center;
font-size: 160px;
}
问题是什么更好用:相对 + 继承还是相对 + 绝对？
==还有一个非常相似的实现:==
HTML:
<div class="scrollableContainer">
<div class="content">
<div class="scrollableContent">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
<div class="slider"></div>
JavaScript:
$(function() {
$( ".slider" ).slider({
slide: function( event, ui ) {
$('.console').text(ui.value);
$('.scrollableContent').css('margin-left', -ui.value * 4);
}
});
});
CSS:
.scrollableContainer {
width: 500px;
height: 200px;
}
.scrollableContainer .content {
border: 2px solid #999;
border-radius: 5px;
height: 100px;
width: 500px;
overflow: hidden;
}
.scrollableContainer .scrollableContent {
font-size: 30px;
margin-left: 0px;
width: 1000px;
}
.scrollableContainer .scrollableContent .item {
font-size: 50px;
font-weight: bold;
border: 5px solid grey;
border-radius: 5px;
width: 70px;
height: 70px;
margin: 10px;
text-align: center;
float: left;
}
.scrollableContainer .slider {
width: 300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
/* overridings for jquery UI styles: */
.scrollableContainer .slider .ui-slider-handle.ui-state-default.ui-corner-all {
border: 4px solid #999;
border-radius: 50%;
cursor: pointer;
}
.scrollableContainer .slider.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content {
background: #ddd;
}
这里我没有使用任何相对\绝对属性，但我试图移动左边距而不是左边的属性。 那么问题是哪种解决方案更好？
===========================
fiddle :
First variant's fiddle
Second variant's fiddle
我不能发布超过 3 个链接，所以第三个变体的 fiddle 在这里:http://jsfiddle.net/TGEQf/
最佳答案
更好的解决方案是使用变换而不是左右动画(如果您使用过渡来更改幻灯片)。转换可以很容易地进行硬件加速，并且与 left 和 top 属性不同，更改它们不会导致回流，并且可以完全在 GPU 中完成，甚至无需重新绘制，所以他们有更好的表现。
关于javascript - 这些 CSS 水平 slider 的不同实现中哪个更好？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22362509/