打造專屬外掛程式之Easy Slider Bar

2021-08-17 11:09:21 字數 4397 閱讀 4240

容器節點

maxnumber

default 100

上限min   

number

default 0

下限scale

integer

default 0

小數字數

trackheight

integer

default 10

軌道高度

type

enum['circle', 'square', 'diamond']

default 'circle'

slider bar型別

barnumber

integer

default 1

slider bar數量

positions

array

default [min...]

slider bar初始位置

onbarmovebegin

function

default new function

滑塊移動開始時觸發

onbarmoving

function

default new function

滑塊移動時觸發

onbarmoveend

function

default new function

滑塊移動結束時觸發

onbarmovebegin(index, position)

onbarmoving(index, position)

onbarmoveend(index, position)

name

parameter

return

comment

setbarposition

pos, index

void

設定 index 指定的 slider bar 的位置為 pos,如果index === undefined,則設定所有 slider bar 的位置為 pos

getbarposition

index

number | array

獲取 index 指定的 slide rbar 的位置,如果index === undefined,則返回所有 slider bar 的位置陣列

/**

* created by lonelydawn on 2017-11-20.

* easysliderbar - easy slider bar

*/// polyfill

array.prototype.foreach = array.prototype.foreach || function (cb)

}array.prototype.filter = array.prototype.filter || function (cb)

} return arr

}var easysliderbar = function (options)

// remove class, and return the changed classname

var getremovedclass = function (classname, value) ).join(' ')

} return classname

} // get parallel pixel to scale

var getinterval = function ()

// limit bars' moving range

var getvalidleft = function (value) else if (value > track.clientwidth) else

} // add trigger on slidebar

var setbarmove = function (bar, index) )

document.onmousemove = function (e) )

}document.onmouseup = function (e) )

document.onmousemove = null

document.onmouseup = null

bar.releasecapture && bar.releasecapture()

}bar.setcapture && bar.setcapture()

return false

} }var el = options.el

var scale = options.scale || 0

var min = !isnan(options.min) ? options.min : 0

var max = !isnan(options.max) ? (options.max > min ? options.max : min + 100) : 100

var barnumber = options.barnumber || 1

var positions = object.prototype.tostring.call(options.positions) === '[object array]' ? options.positions :

for (var i = 0; i < barnumber; i++)

var type = options.type || 'circle'

// set bars' width and height by type

var trackheight = !isnan(options.trackheight) ? options.trackheight : 10

var barwidth = [type]

var barheight = [type]

var baroffset = barwidth / 2

var labelwidth = (30 + 7 * scale) || 30

var labeloffset = labelwidth / 2 - baroffset

// get customized callback

var onbarmovebegin = options.onbarmovebegin || new function()

var onbarmoving = options.onbarmoving || new function()

var onbarmoveend = options.onbarmoveend || new function()

return

} // empty container

for (var i = childs.length - 1; i > -1; i--)

// create track

var track = document.createelement('div')

track.classname = 'slider-track'

// create slider bar

var barstack =

for (var counter = 0; counter < barnumber; counter++)

return

}index ? set(barstack[index]) : barstack.foreach(function (item) )

},// return some bars' position. (if index is not defined, return all.)

getbarposition: function (index) )

} }}

.slider-track 

.slider-label

.slider-label:after

.slider-label.hidden

.slider-bar

.slider-bar:hover .slider-label

.slider-bar.circle,

.slider-bar.square

.slider-bar.circle

.slider-bar.square

.slider-bar.diamond

.slider-bar.diamond:before

.slider-bar.diamond:after

原始碼奉上,任君 hack 。

github

PHPStrom如何打造專屬IDE

ctrl o 在乙個類中尋找相應方法,直接輸入搜尋 ctrl e 開啟最近瀏覽記錄 ctrl space 開啟語法提示 ctrl y 刪除當前行或選中內容所涉及的行 ctrl r 替換 ctrl f 查詢 ctrl 收縮展開 ctrl 摺疊選中的 的 ctrl 匹配 ctrl x 剪下行,不選中,直...

打造自己的專屬遊戲 傳奇私服搭建

想擁有你知道的專屬遊戲嗎 想當gm嗎 想在遊戲裡最強嗎 教你架設傳奇sf 年輕帥靚正文章教程 需要的兩個檔案.dbc 2000.exe 資料庫 mirserver sf服務端 ok 開始 安裝好資料庫之後把 mirserver 這個檔案放入d盤 因為是預設的路徑 所以放在d盤 在把mirserver...

小鵝通幫你打造「專屬私域流量」

在網路中,每個內容生產者都希望得到 專屬私域流量 小鵝通現在開展免費試用 7 天,幫你打造 專屬私域流量 小鵝通的私域流量,核心業務優勢顯著 據了解,小鵝通滿足客戶 線上化 需求的主要核心能力saas服務產品,擁有獲客轉化 課堂 使用者沉澱三大優勢,全面為商家賦能,幫助企業打通線上線下,連線流量渠道...