啃筆記

 

console.clear();
var currentBar = document.querySelector('.current'),
item = document.querySelector('ul.item'),
ItemLi = document.querySelectorAll('ul.item li'),
current = document.querySelector('.current-item'),
rect;

//ul與視窗左邊的距離
item.pos = item.getBoundingClientRect();

function moveInit(){
    //判斷是否有狀態色塊
	if(!current){
      currentBar.style.opacity = 0;
      return
    } else {
       rect = current.getBoundingClientRect();
	   currentBar.style.width = rect.width + 'px';
	   currentBar.style.left=  rect.left - item.pos.left + 'px'	
    }
	console.log(currentBar.style.left)
}
function moveIn(e){	
	for(var i = 0; i<ItemLi.length; i++){		
		ItemLi[i].offsetWidth += currentBar.style.width;
	}	
	rect = this.getBoundingClientRect()
	// console.log(rect)
	// console.log(currentBar.style.left)
	currentBar.style.width = rect.width + 'px';
	currentBar.style.left = rect.left - item.pos.left + 'px'
}
function moveOut(){
    //判斷是否有狀態色塊
	if(!current){
      currentBar.style.opacity = 0;
      return
    } else {
        rect = current.getBoundingClientRect();
	    for(var i = 0; i<ItemLi.length; i++){		
		  ItemLi[i].offsetWidth += currentBar.style.width;	
	    }
	    currentBar.style.width = rect.width + 'px';
	    currentBar.style.left = rect.left - item.pos.left + 'px'
    }	
}

function move(){
	for(var i = 0; i<ItemLi.length; i++){	
			ItemLi[i].addEventListener('mouseover', moveIn, false)	
			ItemLi[i].addEventListener('mouseout', moveOut, false)		
	}	
}
moveInit()
move();

window.onresize = function(){
	item.pos = item.getBoundingClientRect();
	moveInit()
	move();
}