IE_jqueryをサポートするjQuery実装HTMLスライダー

复制代 代码如下:

<スタイル>
.d_b{
    高さ: 20px;
    幅: 10px;
    表示: インラインブロック;
    背景色: 黒;
    位置: 相対;
    垂直配置: 中央;
    上: -15px;
    左: -5px;
}

<スクリプト>
var $dom = $(ドキュメント);
$dom.on('mousedown','#d',function (引数) {
    $(this).data('mouse','down');
    console.log('down');
})
$dom.on('マウスアップ',function(){
    $('#d').data('mouse','up');
    console.log('up');
});
$dom.on('mousemove','#d',function(event){
    if($(this).data('mouse') == 'down'){
        var m_x = イベント.clientX;
        var d_b = $(this).find('.d_b');
        m_x = m_x         m_x = m_x > 208 ? 208: m_x;
        d_b.css('left',m_x-13);
        var max = $(this).attr('max');
        $(this).attr('value', Math.floor((m_x-8)/200 * max))
        console.log($(this).attr('value'));
        $('#text').text($(this).attr('value'))
    }
});

效果图：

以上が本書のすべての内容であり、jQuery の一般的な使用に役立つことが期待されます。