jQuery如何實現(xiàn)自制刻度尺樣式

小編給大家分享一下jQuery如何實現(xiàn)自制刻度尺樣式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

效果圖

jQuery中的extend方法

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

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

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

1、擴展方法的原型

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

需要注意如果多個對象具有該屬性，則后者會覆蓋前者的屬性值，

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

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

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

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

比如：

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

)

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

3、帶布爾值的情況

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

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

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

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

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é)果會是神馬呢？

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

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

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

流程分析

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

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

當(dāng)我們清晰了這個刻度尺的架構(gòu)之后，需要做的就是用append的方法（這里我用的jQuery）插入到指定的位置就可以了（因為這個時候你的刻度尺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ù)值相對應(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表示獲取遍歷的每一個dom對象）

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

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

初始化

　　當(dāng)我們完成插件的封裝，我們只需要創(chuàng)建一個實例化的對象就可以了。

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

以上是“jQuery如何實現(xiàn)自制刻度尺樣式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！