内蒙古十一选五选遗漏:滑塊進度插件,條純js實現(原創),可實例多個

内蒙古十一选五的走势图百度乐彩网 www.cyiqh.com 所屬分類:UI,輸入,媒體-加載,拖和放,滑塊和旋轉

 7449  85  查看評論 (1)
分享到微信朋友圈
X
滑塊進度插件,條純js實現(原創),可實例多個 ie兼容10

更新時間:2019/6/5 上午9:55:40

更新說明:

1. 新增移動端適配,可自行通過移動端查看效果

2. 優化配置

drag: true, //默認開啟拖拽,關閉設為false,不配置默認為true 
    tip: false, 關閉提示 可配置成對象
tip: {
    trigger: 'show', //一直顯示;'hover':'hover':tip鼠標hover顯示,默認為'show'         
    align: 'bottom' //顯示位置,默認為'top',  可設置'top,bottom,left,right'    
}
tip顯示為 % 進度, 獲取數值不受影響

3.新增pro.onLoad(boolean),true:開啟Loading動畫,false:關閉Loading動畫。


發布時間:2019-06-04 23:09:35

jq版本地址:

//www.cyiqh.com/jquery-info21493

原生版相比jq版本更輕量,使用簡單。

使用方法

引用css:

<link rel="stylesheet" href="css/progressJS.css" />

引用js: 

<script src="js/progressJS.js"></script>

html: 

<div class="progress"></div>

可自行設置progress的長寬,默認大小跟隨屏幕可視區域而定,可自行覆蓋進度條顏色尺寸等。

注意:如果改變了.ProgressLine .btn類,border大小和 transform的偏移量必須一致。

新增垂直樣式.vertical{} transform也同理設置即可

.ProgressLine .btn{
    border: 6px solid #fff;
    transform: translate(6px, -50%);
}

js實例化:

var pro = new Progress('.progress')//傳入需要實例的class id  和或任意可以被document.querySelector()識別的內容。

配置說明:

根據具體的需求來配置,除了getVal獲取val值,你也可以不需要配置其它。

new Progress('.progress', {
    val: 10,
    size: 4,
    precision: 2,
    drag: 'on',
    direction: 'horizontal',
    tip: 'on',
    getVal: function(res) {
        console.log(res)
    }
})

詳細說明:

val: 0 
//初始值 取值范圍:0-100, 類型:number
size: 4 
//控件大小默認值為10,可結合css自行修改樣式
precision: 2,
//val精度配置,默認保留0位小數,最多配位4位
drag: 'on',
//默認開啟拖拽,關閉設為'off',不配置默認為'on'
direction: 'horizontal', 
//方向 默認水平 vertical 垂直
tip:'on'
//開啟提示,默認為'off'關閉,也可以配一個對象
tip: {
         trigger: 'show', //顯示方式:‘show’:一直顯示,'hover':tip鼠標hover顯示,默認為'show'
         align: 'bottom'//顯示位置,默認為'top',  可設置'top,bottom,left,right'
        }
getVal: function(res){
 console.log(res)
}
//獲取val回調方法

如果是視頻進度條則需要動態更新val,我們也提供了這樣的方法

var pro = new Progress()
pro.updateVal(val)

也可以通過 pro.updateVal(val) 重置初始值

//模擬音視頻時間軸更新
var i = 0, timeID
timeID = setInterval(function() {
    i += 0.1
    pro.updateVal(i)
    console.log(pro.val)
    if (i >= 100) {
        clearInterval(timeID)
    }
}, 15)

以上就是目前插件的配置,其它功能將會陸續更新中。

TIP:本插件源碼是面向對象實現的,非常適合一些小白學習哦

如有疑問,可咨詢作者Q:1194891819

相關插件-加載,拖和放,滑塊和旋轉

jQuery nprogress.js頁面加載進度條

jQuery nprogress.js頁面加載進度條顯示當前網頁的加載進度
  加載
 45386  226

jquery圖片延遲加載

不有添加多余的屬性值,直接設src屬性值就ok。
  加載
 27493  206

js環形進度條

js環形進度條,再也不怕js了
  加載
 48781  350

菊花加載

超好用的菊花加載效果,可用于手機端
  加載
 44289  219

討論這個項目(1)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

    Queen_木土 0
    2019/9/18 16:57:47
    請問在哪里修改最大值和最小值 回復
取消回復