Question

我正在试图找出更好的方法（我在谈论CSS部分）来创建水平内容滑块。当然最好使用jQuery UI或任何其他内容滑块，所以我的好奇心是如何更好地实现内容滑块。你可以在下面看到我的几个解决方案

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;
}

这里我不使用任何相对\绝对属性，但我试图移动左边距而不是左边属性。那么问题是什么解决方案更好？

===========================
小提琴：
First variant's fiddle
Second variant's fiddle
我不能发布超过3个链接所以第三个变种的小提琴就在这里：http：_ // jsfiddle.net/TGEQf/

Answer 1

更好的解决方案是使用变换而不是左/右动画（如果您使用过渡来更改幻灯片）。变换可以很容易地进行硬件加速，与left和top属性不同，更改它们不会导致重排，并且可以完全在GPU中完成，即使没有重新绘制，因此它们具有更好的性能。 / p>

哪些CSS水平滑块不同的实现更好？

1 个答案: