Rumah > hujung hadapan web > tutorial js > jQuery melaksanakan peluncur html yang menyokong IE_jquery

jQuery melaksanakan peluncur html yang menyokong IE_jquery

WBOY
Lepaskan: 2016-05-16 16:09:08
asal
1064 orang telah melayarinya

复制代码 代码如下:




.d_b{
    ketinggian: 20px;
    lebar: 10px;
    paparan: blok sebaris;
    warna latar belakang: hitam;
    jawatan: relatif;
    jajar menegak: tengah;
    atas: -15px;
    kiri: -5px;
}







var $dom = $(dokumen);
$dom.on('mousedown','#d',function (argument) {
    $(this).data('mouse','down');
    console.log('down');
})
$dom.on('mouseup',function(){
    $('#d').data('tetikus','up');
    console.log('up');
});
$dom.on('mousemove','#d',function(event){
    if($(this).data('mouse') == 'down'){
        var m_x = event.clientX;
        var d_b = $(this).cari('.d_b');
        m_x = m_x < 8 ? 8 : m_x;
        m_x = m_x > 208 ? 208: m_x;
        d_b.css('kiri',m_x-13);
        var max = $(this).attr('maks');
        $(this).attr('value', Math.floor((m_x-8)/200 * maks))
        console.log($(this).attr('value'));
        $('#text').text($(this).attr('value'))
    }
});


效果图:

以上就是本文的全部内容了,希望能够对大家学习使用jQuery有所帮助。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan