0

我正在尝试创建一个记分牌，用户可以在其中选择他们想要查看的运动。我想我已经很好地确定了这部分，这要归功于对这个网站的搜索——但我希望记分板也能够水平滚动。我很难将这两个功能结合起来。

这是我一直在使用的jsFiddle 。

和代码：

    <div class="sport-select">Select sport:</div>
<div class="select-wrapper">
    <select id="selectMe">
        <option value="option1">Football</option>
        <option value="option2">Volleyball</option>
        <option value="option3">Softball</option>
        <option value="option4">Boys Soccer</option>
    </select>
</div>
<div id="option1" class="group">
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team A</td>
                    <td class="score">17</td>
                </tr>
                <tr>
                    <td class="team">Team B</td>
                    <td class="score">14</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team C</td>
                    <td class="score">9</td>
                </tr>
                <tr>
                    <td class="team">Team D</td>
                    <td class="score">0</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team E</td>
                    <td class="score">15</td>
                </tr>
                <tr>
                    <td class="team">Team F</td>
                    <td class="score">32</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team G</td>
                    <td class="score">28</td>
                </tr>
                <tr>
                    <td class="team">Team H</td>
                    <td class="score">17</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team I</td>
                    <td class="score">18</td>
                </tr>
                <tr>
                    <td class="team">Team J</td>
                    <td class="score">16</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team K</td>
                    <td class="score">30</td>
                </tr>
                <tr>
                    <td class="team">Team L</td>
                    <td class="score">58</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team M</td>
                    <td class="score">84</td>
                </tr>
                <tr>
                    <td class="team">Team N</td>
                    <td class="score">56</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team ABC</td>
                    <td class="score">40</td>
                </tr>
                <tr>
                    <td class="team">Team 123</td>
                    <td class="score">51</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team MI</td>
                    <td class="score">4</td>
                </tr>
                <tr>
                    <td class="team">Team NW</td>
                    <td class="score">78</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team ERT</td>
                    <td class="score">9</td>
                </tr>
                <tr>
                    <td class="team">Team QWERW</td>
                    <td class="score">54</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div id="option2" class="group">
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team O</td>
                    <td class="score">3</td>
                </tr>
                <tr>
                    <td class="team">Team P</td>
                    <td class="score">0</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team Q</td>
                    <td class="score">3</td>
                </tr>
                <tr>
                    <td class="team">Team R</td>
                    <td class="score">1</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team S</td>
                    <td class="score">3</td>
                </tr>
                <tr>
                    <td class="team">Team T</td>
                    <td class="score">0</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team U</td>
                    <td class="score">3</td>
                </tr>
                <tr>
                    <td class="team">Team V</td>
                    <td class="score">1</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team W</td>
                    <td class="score">3</td>
                </tr>
                <tr>
                    <td class="team">Team X</td>
                    <td class="score">0</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div id="option3" class="group">
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team Y</td>
                    <td class="score">3</td>
                </tr>
                <tr>
                    <td class="team">Team Z</td>
                    <td class="score">1</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team AA</td>
                    <td class="score">4</td>
                </tr>
                <tr>
                    <td class="team">Team BB</td>
                    <td class="score">2</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team CC</td>
                    <td class="score">3</td>
                </tr>
                <tr>
                    <td class="team">Team DD</td>
                    <td class="score">2</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div id="option4" class="group">
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team EE</td>
                    <td class="score">3</td>
                </tr>
                <tr>
                    <td class="team">Team FF</td>
                    <td class="score">1</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team GG</td>
                    <td class="score">0</td>
                </tr>
                <tr>
                    <td class="team">Team HH</td>
                    <td class="score">1</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="block">
        <table class="boxscore">
            <tbody>
                <tr>
                    <td class="team">Team II</td>
                    <td class="score">0</td>
                </tr>
                <tr>
                    <td class="team">Team JJ</td>
                    <td class="score">1</td>
                </tr>
                <tr>
                    <td class="info" colspan="2">Final</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

更多代码（下拉）：

$(document).ready(function () {
    $('.group').hide();
    $('#option1').show();
    $('#selectMe').change(function () {
        $('.group').hide();
        $('#' + $(this).val()).show();
    })
});

CSS：

.boxscore {
    font-family: verdana;
    font-size: 9px;
    border: 1px solid #d8d8d8;
    border-collapse: collapse;
    background: #fbfbfb;
    color: #333;
    display: inline-block;
}
.boxscore a {
    color:#1b76bc;
    text-decoration: none;
}
.team {
    padding: 2px;
    border-bottom: 1px dotted #d8d8d8;
}
.score {
    padding: 2px;
    border-bottom: 1px dotted #d8d8d8;
}
.info {
    padding: 2px;
    color:#333;
    background: #fbfbfb;
    font-weight:bold;
    border-top: 1px solid #d8d8d8;
}
.group {
    width: auto;
    overflow:hidden;
    height:55px;
}
.block {
    display: inline-block;
}
.select-wrapper {
    float:left;
    background: transparent;
    width: 100px;
    padding: 5px;
    font-size: 10px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 34px;
    -webkit-appearance: none;
    color: #333;
    font-family: verdana;
    clear: left;
}
.sport-select {
    float:left;
    font-size: 10px;
    color: #333;
    font-family: verdana;
    font-weight: bold;
    padding-left: 5px;
}
4

2 回答 2

0

div.group在元素周围添加一个容器 div 。您可以通过修改其margin-left属性来移动数据。请参阅 JavaScript 部分。

添加箭头：

<div id="tools">
    <span id="back">&lt;</span>
    <span id="spacer">&nbsp;</span>
    <span id="next">&gt;</span>
</div>

现场演示

JavaScript

$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
    $('.group').hide().css('margin-left', '0px');
    $('#' + $(this).val()).show();

});

$('#next').on('click', function () {
    console.log(parseInt($('.group').css('margin-left')));
    $('.group').css('margin-left', parseInt($('.group').css('margin-left')) + 10 + 'px');
});

$('#back').on('click', function () {
    console.log(parseInt($('.group').css('margin-left')));
    $('.group').css('margin-left', parseInt($('.group').css('margin-left')) - 10 + 'px');
});

HTML

<div class="sport-select">Select sport:</div>
<div class="select-wrapper">
    <select id="selectMe">
        <option value="option1">Football</option>
        <option value="option2">Volleyball</option>
        <option value="option3">Softball</option>
        <option value="option4">Boys Soccer</option>
    </select>
</div>
<div id="groupContainer">
    <div id="option1" class="group">
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team A</td>
                        <td class="score">17</td>
                    </tr>
                    <tr>
                        <td class="team">Team B</td>
                        <td class="score">14</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team C</td>
                        <td class="score">9</td>
                    </tr>
                    <tr>
                        <td class="team">Team D</td>
                        <td class="score">0</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team E</td>
                        <td class="score">15</td>
                    </tr>
                    <tr>
                        <td class="team">Team F</td>
                        <td class="score">32</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team G</td>
                        <td class="score">28</td>
                    </tr>
                    <tr>
                        <td class="team">Team H</td>
                        <td class="score">17</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team I</td>
                        <td class="score">18</td>
                    </tr>
                    <tr>
                        <td class="team">Team J</td>
                        <td class="score">16</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team K</td>
                        <td class="score">30</td>
                    </tr>
                    <tr>
                        <td class="team">Team L</td>
                        <td class="score">58</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team M</td>
                        <td class="score">84</td>
                    </tr>
                    <tr>
                        <td class="team">Team N</td>
                        <td class="score">56</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team ABC</td>
                        <td class="score">40</td>
                    </tr>
                    <tr>
                        <td class="team">Team 123</td>
                        <td class="score">51</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team MI</td>
                        <td class="score">4</td>
                    </tr>
                    <tr>
                        <td class="team">Team NW</td>
                        <td class="score">78</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team ERT</td>
                        <td class="score">9</td>
                    </tr>
                    <tr>
                        <td class="team">Team QWERW</td>
                        <td class="score">54</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="option2" class="group">
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team O</td>
                        <td class="score">3</td>
                    </tr>
                    <tr>
                        <td class="team">Team P</td>
                        <td class="score">0</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team Q</td>
                        <td class="score">3</td>
                    </tr>
                    <tr>
                        <td class="team">Team R</td>
                        <td class="score">1</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team S</td>
                        <td class="score">3</td>
                    </tr>
                    <tr>
                        <td class="team">Team T</td>
                        <td class="score">0</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team U</td>
                        <td class="score">3</td>
                    </tr>
                    <tr>
                        <td class="team">Team V</td>
                        <td class="score">1</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team W</td>
                        <td class="score">3</td>
                    </tr>
                    <tr>
                        <td class="team">Team X</td>
                        <td class="score">0</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="option3" class="group">
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team Y</td>
                        <td class="score">3</td>
                    </tr>
                    <tr>
                        <td class="team">Team Z</td>
                        <td class="score">1</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team AA</td>
                        <td class="score">4</td>
                    </tr>
                    <tr>
                        <td class="team">Team BB</td>
                        <td class="score">2</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team CC</td>
                        <td class="score">3</td>
                    </tr>
                    <tr>
                        <td class="team">Team DD</td>
                        <td class="score">2</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="option4" class="group">
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team EE</td>
                        <td class="score">3</td>
                    </tr>
                    <tr>
                        <td class="team">Team FF</td>
                        <td class="score">1</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team GG</td>
                        <td class="score">0</td>
                    </tr>
                    <tr>
                        <td class="team">Team HH</td>
                        <td class="score">1</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block">
            <table class="boxscore">
                <tbody>
                    <tr>
                        <td class="team">Team II</td>
                        <td class="score">0</td>
                    </tr>
                    <tr>
                        <td class="team">Team JJ</td>
                        <td class="score">1</td>
                    </tr>
                    <tr>
                        <td class="info" colspan="2">Final</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="tools"><span id="back">&lt;</span><span id="spacer">&nbsp;</span><span id="next">&gt;</span>
</div>

CSS

.boxscore {
    font-family: verdana;
    font-size: 9px;
    border: 1px solid #d8d8d8;
    border-collapse: collapse;
    background: #fbfbfb;
    color: #333;
    display: inline-block;
}
.boxscore a {
    color:#1b76bc;
    text-decoration: none;
}
.team {
    padding: 2px;
    border-bottom: 1px dotted #d8d8d8;
}
.score {
    padding: 2px;
    border-bottom: 1px dotted #d8d8d8;
}
.info {
    padding: 2px;
    color:#333;
    background: #fbfbfb;
    font-weight:bold;
    border-top: 1px solid #d8d8d8;
}
#groupContainer {
    width:450px;
    overflow:hidden;
}
.group {
    width:450px;
    overflow:hidden;
    height:55px;
}
.block {
    display: inline-block;
}
.select-wrapper {
    float:left;
    background: transparent;
    width: 100px;
    padding: 5px;
    font-size: 10px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 34px;
    -webkit-appearance: none;
    color: #333;
    font-family: verdana;
    clear: left;
}
.sport-select {
    float:left;
    font-size: 10px;
    color: #333;
    font-family: verdana;
    font-weight: bold;
    padding-left: 5px;
}
#tools {
    margin-left:125px;
}
#spacer {
    display:inline-block;
    width:400px;
}

#tools {
    cursor:default;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
}
#back, #next {
    cursor: pointer;
}
于 2013-07-30T19:04:56.377 回答
0

滚动是在包装样式中完成的：

.group {
    width: 300px;
    height: 77px;
    white-space: nowrap;
    overflow: auto;
}

您可以使用 jQuery 让箭头非常简单地滚动包装器：

var scrollInterval;

function scrollDiv(px){
    var visGroup = $('.group:visible');
    visGroup.scrollLeft(
        visGroup.scrollLeft() + px
    );
};

//Scroll arrows
$('#arrowR').mousedown(function(){
    scrollInterval = setInterval(function(){ scrollDiv(10) }, 50);
});
$('#arrowR').mouseup(function(){
    clearInterval(scrollInterval);
});
$('#arrowL').mousedown(function(){
    scrollInterval = setInterval(function(){ scrollDiv(-10) }, 50);
});
$('#arrowL').mouseup(function(){
    clearInterval(scrollInterval);
});

更新了 jsFiddle：http: //jsfiddle.net/JSyLV/1612/

于 2013-07-30T21:01:24.067 回答