山东十一选五号码遗漏:滑塊進度插件,條純js實現(原創),可實例多個

2019山东十一选五杀号 www.xvcvn.com 所屬分類:UI,輸入,媒體-加載,拖和放,滑塊和旋轉

 6522  69  查看評論 (0)
分享到微信朋友圈
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.xvcvn.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.Loading

8種fakeloader頁面加載效果代碼,支持7種效果和自定義圖片,兼容主流瀏覽器!
  加載
 42878  236

jquery實現圖片預加載

jquery實現圖片預加載
  加載
 32103  234

jQuery進度條插件jqbar

柱狀圖動態顯示工具
  加載
 30228  174

HTML5實現的網頁進度條

HTML5實現的網頁進度條
  加載
 25630  187

討論這個項目(0)回答他人問題或分享插件使用方法獎勵jQ幣

取消回復