[英]Handling multiple setInterval calls
我在解決如何為div類創建簡單的拖放效果時遇到麻煩。 由於此類中每個項目的onmouseover事件當前都調用相同的函數,因此在div之間快速進行鼠標移動會使上一個div停留在中間(如果您在div底部上下滑動鼠標,則會看到效果)我正在嘗試生產)。
我當前的方法還要求我復制大量代碼以從每個div的事件處理程序中調用該函數,因此,如果有一種將它們包裝到一個函數中的方法,我真的很想知道。 我敢肯定有一種簡單有效的方法來完成所有這些工作,只是似乎無法解決。
jsFiddle示例: http : //jsfiddle.net/DvXDb/
這是我的代碼(底部的腳本):
div.bouncer{
position:relative;
top:50px;
}
function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
var thisDiv; var nextDiv; var selDiv;
var containerDivList = document.getElementsByClassName("container");
var containerArray = Array.prototype.slice.call(containerDivList);
var container1 = containerArray[0];
var container2 = containerArray[1];
var container3 = containerArray[2];
var container4 = containerArray[3];
container1.onmouseover = function () {
callPop(this.getElementsByTagName('div')[0]);
}
container1.onmouseout = function () {
callDrop(this.getElementsByTagName('div')[0]);
}
container2.onmouseover = function () {
callPop(this.getElementsByTagName('div')[0]);
}
container2.onmouseout = function () {
callDrop(this.getElementsByTagName('div')[0]);
}
container3.onmouseover = function () {
callPop(this.getElementsByTagName('div')[0]);
}
container3.onmouseout = function () {
callDrop(this.getElementsByTagName('div')[0]);
}
var relativeHeights = ['0px', '5px', '10px', '15px', '20px', '25px', '30px', '35px', '40px', '45px', '50px'];
var index = 10;
var intervalHandle1;
function callPop(thisDiv) {
clearInterval(intervalHandle1);
selDiv = thisDiv;
intervalHandle1 = setInterval(popImage, 5);
}
function callDrop(thisDiv) {
clearInterval(intervalHandle1);
selDiv = thisDiv;
intervalHandle1 = setInterval(dropImage, 5);
}
function popImage() {
selDiv.style.top = relativeHeights[index];
index--;
if (selDiv.style.top === '0px') {
index = 0;
}
}
function dropImage() {
index++;
selDiv.style.top = relativeHeights[index];
if (selDiv.style.top === '50px') {
index = 10;
}
}
這是一個使用jQuery的示例,您確實應該為這樣的事情使用Framework。 他們簡化了一切。
$(function () {
$('.bouncer').hover(
function () {
$(this).stop().animate({
top: 10
}, 500);
},
function () {
$(this).stop().animate({
top: 50
}, 500);
}
);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.