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

效果圖：

以上就是本文的全部內(nèi)容了，希望能夠?qū)Υ蠹覍W(xué)習(xí)使用jQuery有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery的each終止或跳過示例代碼
jQuery的each終止或跳過：涉及迭代，不可避免需要有非正常終止，或強(qiáng)制跳過的情況
2013-12-12
jquery入門——事件機(jī)制之事件中的冒泡現(xiàn)象示例解釋
事件被觸發(fā)后被分為兩個階段，一個是捕獲（Capture），另一個是冒泡(Bubbing)，但大多瀏覽器并不是都支持捕獲階段，因此事件被觸發(fā)后，往往執(zhí)行冒泡過程,感興趣的朋友可以了解下，或許對你學(xué)習(xí)事件機(jī)制有所幫助
2013-02-02
jQuery學(xué)習(xí)筆記之總體架構(gòu)
jQuery是一個兼容多瀏覽器的javascript框架，核心理念是write less,do more(寫得更少,做得更多)。如今，jQuery已經(jīng)成為最流行的javascript框架，在世界前10000個訪問最多的網(wǎng)站中，有超過55%在使用jQuery。那么作為一個前端設(shè)計師，怎么可能不來深入了解下jQuery呢，首先我們從他的總體構(gòu)架開始吧
2014-06-06
分享一款基于jQuery的視頻播放插件
最近在做一個項目，需要一個在線視頻播放的功能，在度娘上找了許多都不是太理想，就動手寫了一個，分享給大家
2014-10-10
jquery禁用右鍵示例
這篇文章主要介紹了jquery禁用右鍵示例,需要的朋友可以參考下
2014-04-04
jQuery插件FusionCharts繪制2D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D環(huán)餅圖效果,結(jié)合實例形式分析了jQuery使用插件FusionCharts載入xml數(shù)據(jù)繪制2D環(huán)餅圖的相關(guān)步驟與操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-04-04
JQuery限制復(fù)選框checkbox可選中個數(shù)的方法
這篇文章主要介紹了JQuery限制復(fù)選框checkbox可選中個數(shù)的方法,涉及jQuery操作復(fù)選框長度判斷與屬性修改的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
jquery Validation表單驗證使用詳解
功能強(qiáng)大的 jquery 表單驗證插件，適用于日常的 E-mail、電話號碼、網(wǎng)址等驗證及 Ajax 驗證，除自身擁有豐富的驗證規(guī)則外，還可以添加自定義的驗證規(guī)則。兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
2015-04-04
Jquery實現(xiàn)顯示和隱藏的4種簡單方式
顯示和隱藏的效果想必大家都有見到過吧，其實很簡單，通過jquery便可輕松實現(xiàn)，下面為大家整理了4種方式，大家可以根據(jù)需求自由選擇
2013-08-08
jQuery實現(xiàn)發(fā)送驗證碼并60秒倒計時功能
這篇文章主要介紹了jQuery實現(xiàn)發(fā)送驗證碼并60秒倒計時功能，非常不錯，代碼簡單易懂，需要的朋友參考下吧
2016-11-11