<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrap {
margin-top: 100px;
}
.item {
padding: 10px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="wrap">
<span class="item">Item 1</span>
<span class="item">Item 2</span>
<span class="item">Item 3</span>
<span class="item">Item 4</span>
</div>
<script>
var divElem = document.querySelector('.wrap'),
spanElems = [].slice.call( document.querySelectorAll('.item') ),
isOverElem, cX, cY, pX, pY, cTime, pTime, sensitivity = 0.1,
i = 0, timer, prev;
function foo() {
spanElems[prev || 0].style.background = '';
spanElems[prev = i % spanElems.length, i++ % spanElems.length].style.background = 'red';
timer = setTimeout(foo, 3000);
};
foo();
divElem.addEventListener('mouseover', function(event) {
if (isOverElem) return;
isOverElem = true;
pX = event.pageX;
pY = event.pageY;
pTime = Date.now();
this.addEventListener('mousemove', move);
});
divElem.addEventListener('mouseout', function(event) {
if ( event.relatedTarget && !this.contains(event.relatedTarget) ) {
isOverElem = false;
this.removeEventListener('mousemove', move);
if (isHover) {
foo();
isHover = false;
}
}
});
function move(event) {
var speed;
cX = event.pageX;
cY = event.pageY;
cTime = Date.now();
if (pTime == cTime) return;
speed = Math.sqrt( Math.pow(pX - cX, 2) + Math.pow(pY - cY, 2) ) / (cTime - pTime);
if (speed < sensitivity) {
divElem.removeEventListener("mousemove", move);
isHover = true;
clearInterval(timer);
} else {
setTimeout(function() {
pX = cX;
pY = cY;
pTime = cTime;
}, 10);
}
}
</script>
</body>
</html>