jQuery实现的支持IE的html滑动条

复制代码代码如下:
<html>
<script type="text/javascript" src="jquery.js"></script>
<style>
.d_b{
    height: 20px;
    width: 10px;
    display: inline-block;
    background-color: black;
    position: relative;
    vertical-align: middle;
    top: -15px;
    left: -5px;
}
</style>
<div id="d" style="width:200px;cursor: pointer;" max=100 min=0 value=10 >
<div style="height:10px; width:100%; background-color:green" ></div>
<b class="d_b"></b>
</div>
<b id="text"></b>
<script>
var $dom = $（document）;
$dom.on（"mousedown","#d",function （argument） {
    $（this）.data（"mouse","down"）;
    console.log（"down"）;
}）
$dom.on（"mouseup",function（）{
    $（"#d"）.data（"mouse","up"）;
    console.log（"up"）;
}）;
$dom.on（"mousemove","#d",function（event）{
    if（$（this）.data（"mouse"） == "down"）{
        var m_x = event.clientX;
        var d_b = $（this）.find（".d_b"）;
        m_x = m_x < 8 ? 8 : 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"））
    }
}）;
</script>
</html>

效果图：

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