JS實(shí)現(xiàn)自定義滾動(dòng)條
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#parent{
width: 600px;
height: 20px;
background: #ccc;
position: relative;
margin: 10px auto;
}
#div1{
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0;
top: 0;
}
#div2{
width: 300px;
height: 400px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
#div3 {
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oParent = document.getElementById('parent');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var disX = 0;
oDiv.onmousedown = function(ev) {
var oEvent = ev || event;
disX = oEvent.clientX - oDiv.offsetLeft;
function mouseMove(ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
if(l<0)
{
l=0;
}else if(l>oParent.offsetWidth-oDiv.offsetWidth)
{
l= oParent.offsetWidth-oDiv.offsetWidth;
}
oDiv.style.left = l + 'px';
//得到滾動(dòng)位置的比例
var scale = l/(oParent.offsetWidth-oDiv.offsetWidth);
//document.title = scale ;
//需要減去div2的高度
oDiv3.style.top= -scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
};
function mouseUp() {
this.onmousemove = null;
this.onmouseup = null;
if(this.releaseCapture) {
this.releaseCapture();
}
}
//兼容性判定
if(oDiv.setCapture) {
//IE
oDiv.onmousemove = mouseMove;
oDiv.onmouseup = mouseUp;
oDiv.setCapture();
} else {
//Chrome/FF
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
}
return false; //chrome,ff,ie9
}
}
</script>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3">
線程和進(jìn)程
因此，我們應(yīng)該要聽從蘋果的勸告熔脂，珍愛生命昙楚，遠(yuǎn)離線程。不過話又說回來，盡管隊(duì)列是執(zhí)行并發(fā)任務(wù)的首先方式残拐，但是畢竟它們也不是什么萬能的靈丹妙藥愧杯。所以，在以下三種場(chǎng)景下收擦，我們還是應(yīng)該直接使用線程的：
* 用線程以外的其他任何方式都不能實(shí)現(xiàn)我們的特定任務(wù)贮配；
* 必須實(shí)時(shí)執(zhí)行一個(gè)任務(wù)。因?yàn)殡m然隊(duì)列會(huì)盡可能快地執(zhí)行我們提交的任務(wù)炬守，但是并不能保證實(shí)時(shí)性牧嫉；
* 你需要對(duì)在后臺(tái)執(zhí)行的任務(wù)有更多的可預(yù)測(cè)行為.
*
NSInvocationOperation ：我們可以通過一個(gè) object 和 selector 非常方便地創(chuàng)建一個(gè) NSInvocationOperation ，這是一種非常動(dòng)態(tài)和靈活的方式减途。假設(shè)我們已經(jīng)有了一個(gè)現(xiàn)成的方法酣藻，這個(gè)方法中的代碼正好就是我們需要執(zhí)行的任務(wù)，那么我們就可以在不修改任何現(xiàn)有代碼的情況下鳍置，通過方法所在的對(duì)象和這個(gè)現(xiàn)有方法直接創(chuàng)建一個(gè) NSInvocationOperation 辽剧。
NSBlockOperation ：我們可以使用 NSBlockOperation 來并發(fā)執(zhí)行一個(gè)或多個(gè) block ，只有當(dāng)一個(gè) NSBlockOperation 所關(guān)聯(lián)的所有 block 都執(zhí)行完畢時(shí)税产，這個(gè) NSBlockOperation 才算執(zhí)行完成怕轿，有點(diǎn)類似于 dispatch_group 的概念。
另外辟拷，所有的 operation 都支持以下特性：
* 支持在 operation 之間建立依賴關(guān)系撞羽，只有當(dāng)一個(gè) operation 所依賴的所有 operation 都執(zhí)行完成時(shí)，這個(gè) operation 才能開始執(zhí)行衫冻；
* 支持一個(gè)可選的 completion block 诀紊，這個(gè) block 將會(huì)在 operation 的主任務(wù)執(zhí)行完成時(shí)被調(diào)用；
* 支持通過 KVO 來觀察 operation 執(zhí)行狀態(tài)的變化隅俘；
* 支持設(shè)置執(zhí)行的優(yōu)先級(jí)邻奠，從而影響 operation 之間的相對(duì)執(zhí)行順序；
* 支持取消操作为居，可以允許我們停止正在執(zhí)行的 operation 碌宴。
在絕大多數(shù)情況下，我們都不需要去實(shí)現(xiàn)一個(gè)并發(fā)的 operation 蒙畴。如果我們一直是通過將 operation 添加到 operation queue 的方式來執(zhí)行 operation 的話贰镣，我們就完全沒有必要去實(shí)現(xiàn)一個(gè)并發(fā)的 operation 。因?yàn)椋?dāng)我們將一個(gè)非并發(fā)的 operation 添加到 operation queue 后碑隆，operation queue 會(huì)自動(dòng)為這個(gè) operation 創(chuàng)建一個(gè)線程董朝。因此，只有當(dāng)我們需要手動(dòng)地執(zhí)行一個(gè) operation 干跛，又想讓它異步執(zhí)行時(shí)子姜，我們才有必要去實(shí)現(xiàn)一個(gè)并發(fā)的 operation 。
</div>
</div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
