jQuery怎么實(shí)現(xiàn)自制刻度尺樣式

這篇文章主要介紹“jQuery怎么實(shí)現(xiàn)自制刻度尺樣式”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“jQuery怎么實(shí)現(xiàn)自制刻度尺樣式”文章能幫助大家解決問題。

效果圖

jQuery中的extend方法

　　這里我參考了前輩的博客，在前輩博客中可以進(jìn)行更深一步的學(xué)習(xí)：

　　文檔中給的解釋是：jQuery.extend()函數(shù)主要是用于將一個(gè)或多個(gè)對(duì)象的內(nèi)容合并到目標(biāo)對(duì)象上，該函數(shù)可以將一個(gè)或多個(gè)對(duì)象的成員屬性和方法復(fù)制到指定的對(duì)象上。

　　extend也是在我們寫插件時(shí)常用的方法，

1、擴(kuò)展方法的原型

$.extend(param,dparam...),它的含義是將dparam合并到param中，

需要注意如果多個(gè)對(duì)象具有該屬性，則后者會(huì)覆蓋前者的屬性值，

也就是說(shuō)var result = $.extend({},{name : 'JSoso',age：17}，{name:"okaychen",sex:"boy"})

最后 result = {name:"okaychen",age:17,sex:"boy"};

2、只有一個(gè)參數(shù)的情況

只有一個(gè)參數(shù)時(shí)會(huì)將改方法合并到j(luò)Query的全局對(duì)象中

比如：

$.extend(
　　{hello:function(){console.log('hello extend')}}

)

最終會(huì)將hello方法添加到j(luò)Query全局對(duì)象中去。

3、帶布爾值的情況

jQuery中的extend還有一種重載原型

語(yǔ)法：$.extend(boolean,dest,src1,src2...) 

第一個(gè)布爾值參數(shù)表示是否使用深度拷貝，默認(rèn)為false（可以明確指定為true，但是不能明確指明為false）

那么什么是深度拷貝呢？其實(shí)不難理解，深度拷貝就是該"屬性對(duì)象"的"屬性"也會(huì)被拷貝的目標(biāo)對(duì)象中

var result = $.extend(true, {}
　　{name:'JSoso',abstract: {age：17,country:'USA'}},
　　{last："Amor",abstract: {state:'student',country:'China'}}
);

那么合并后的結(jié)果就是：

result = {
　　name:'JSoso',
　　last:'Amor',
　　abstract:{age:17,state:'student',country:'China'}
}

那么如果參數(shù)是false，結(jié)果會(huì)是神馬呢？

result = {
　　name : "JSoso",
　　last : "Amor",
　　abstract:{state:"student",country:"China"}
}

會(huì)看到第一個(gè)abstract內(nèi)的屬性并沒有被拷貝，因?yàn)闆]有執(zhí)行深度拷貝，所以abstract會(huì)被后一個(gè)覆蓋掉了。

關(guān)于extend拷貝的方法我總結(jié)了上面三點(diǎn)，其實(shí)還有好多學(xué)問，需要我們?nèi)グl(fā)掘。

流程分析

　　我看目前網(wǎng)上幾乎都是水平的可滑動(dòng)的刻度尺插件，幾乎沒有豎直的插件，其實(shí)也大同小異。因?yàn)樽鲞@個(gè)東西的需要，所以我需要做一個(gè)豎直的刻度尺（而且我本人也不喜歡用插件，我想有一天實(shí)現(xiàn)我的插件夢(mèng)）。

我做這個(gè)插件的第一步是先用HTML+ CSS靜態(tài)的寫出大致的效果（這樣的同時(shí)我覺得我也直觀的構(gòu)思了這個(gè)東西的大致架構(gòu)），比如先0~10做出來(lái)，然后計(jì)算好間距，然后在后面做文章。　

當(dāng)我們清晰了這個(gè)刻度尺的架構(gòu)之后，需要做的就是用append的方法（這里我用的jQuery）插入到指定的位置就可以了（因?yàn)檫@個(gè)時(shí)候你的刻度尺css代碼基本已經(jīng)完成）。

然后我們需要處理中間標(biāo)志（即曲線的初始位置）

var firstRand = true；
if (firstRand) {
 pTop = $(".rulerPointer").position().bottom;
}
var rulerLNo = 0;
for (var z = 0; z < setLen; z++) {
  if (z * setHeight > pTop) {
   limitTop = pTop - z * setHeight;
   rulerLNo = z;
   break;
 }
}

改變曲線的位置<和傳入的數(shù)值相對(duì)應(yīng)>

 if (param.value && param.value >= param.minUnit && param.value <= param.max) {
  $(" .rulerPointer").css("bottom", (param.value / param.minUnit) * 10 * param.mult)
} else {
  $(" .rulerPointer").css("bottom", '0');
}

然后我們用each遍歷的方法給刻度尺標(biāo)上刻度值（這里idx就是索引值，ele表示獲取遍歷的每一個(gè)dom對(duì)象）

$("#" + param.wrapperId + " .sizeNo").each(function (idx, ele) {
 if (idx >= rulerLNo && idx < setLen) {
   $(ele).html((idx - rulerLNo) * param.minUnit *param.unitSet);
 }
})

到這里我們的刻度尺的代碼已經(jīng)完成（我只展示了部分代碼）。

初始化

　　當(dāng)我們完成插件的封裝，我們只需要?jiǎng)?chuàng)建一個(gè)實(shí)例化的對(duì)象就可以了。

var measureRuler = new MeasureRuler({
 wrapperId:"rulerWrapper",   　　　　 //刻度尺容器的ID
 max:110,         //最大刻度
 minUnit:1,         //最小刻度
 unitset:10,         //刻度尺單元長(zhǎng)度
 value:60,         //初始化值，曲線的初始位置
 mult:1          //刻度尺倍數(shù)，默認(rèn)為10px
})

關(guān)于“jQuery怎么實(shí)現(xiàn)自制刻度尺樣式”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。