快捷導(dǎo)航

jQuery實(shí)現(xiàn)的支持IE的html滑動條

更新時(shí)間：2015年03月16日 11:03:52 投稿：hebedich

本文給大家分享的是一段使用jQuery實(shí)現(xiàn)支持IE的html滑動條代碼，效果非常不錯(cuò)，這里推薦給大家，希望大家能夠喜歡。

<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.Validate驗(yàn)證庫知識點(diǎn)的詳解
本篇文章介紹了，基于jQuery.Validate驗(yàn)證庫知識點(diǎn)的詳解。需要的朋友參考下
2013-04-04
jQuery插件HighCharts實(shí)現(xiàn)2D柱狀圖、折線圖的組合多軸圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)2D柱狀圖、折線圖的組合多軸圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件同時(shí)繪制柱狀圖、折線圖的實(shí)現(xiàn)技巧與相關(guān)操作步驟,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jquery插件推薦瀏覽器嗅探userAgent
這里給大家推薦一款瀏覽器嗅探的jQuery插件useragent，兼容各大瀏覽器，在做項(xiàng)目的時(shí)候經(jīng)常要用到，非常的實(shí)用
2014-11-11
基于MVC+EasyUI的web開發(fā)框架之使用云打印控件C-Lodop打印頁面或套打報(bào)關(guān)運(yùn)單信息
這篇文章主要介紹了基于MVC+EasyUI的web開發(fā)框架之使用云打印控件C-Lodop打印頁面或套打報(bào)關(guān)運(yùn)單信息的相關(guān)資料,非常不錯(cuò)，需要的朋友可以參考下
2016-08-08
jQuery 利用$.ajax 時(shí)獲取原生XMLHttpRequest 對象的方法
這篇文章主要介紹了jQuery 利用$.ajax 時(shí)獲取原生XMLHttpRequest 對象的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
前端jquery部分很精彩
這篇文章主要為大家詳細(xì)介紹了前端筆記之jquery部分，jQuery是一個(gè)兼容多瀏覽器的javascript庫
2016-05-05
jQuery實(shí)現(xiàn)布局高寬自適應(yīng)的簡單實(shí)例
下面小編就為大家?guī)硪黄猨Query實(shí)現(xiàn)布局高寬自適應(yīng)的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
淺談jQuery中replace()方法
這篇文章主要介紹了jQuery中replace()方法用法,實(shí)例分析了replace()方法的功能、定義及匹配元素去替換指定內(nèi)容的方法,需要的朋友可以參考下
2015-05-05
easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動提示功能示例代碼
本篇文章主要介紹了easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動提示功能示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2016-12-12
jQuery+JSON+jPlayer實(shí)現(xiàn)QQ空間音樂查詢功能示例
本文為大家介紹下jQuery+JSON+jPlayer實(shí)現(xiàn)QQ空間音樂查詢，具體的實(shí)現(xiàn)過程感興趣的朋友可以了解下哈，希望對大家有所幫助
2013-06-06