Javascript가 마우스를 위로 움직이고 작은 삼각형 슬라이더가 effect_javascript 기술을 천천히 따라갑니다.

functionchangeCoord( id, left ) {
$$(id).style.left = left;
}
function $$(id) {
return document.getElementById(id)
} 🎜>function $$$(id) {
return document.getElementsByClassName(id)[0];
}
function indexOf(arry, obj) {
for (var i = 0; i < arry .length; i ) {
if (obj == arry[i]) {
return i
}
}
window.onload = 함수 () {
//페이지의 모든 슬라이더에 대한 이벤트 등록
//products-box-center 상위 컨테이너 객체

var obj = document.getElementsByClassName('products-box-center') ;
for(var i=0;itry{
var base=obj[i].getElementsByClassName('products-box-center-title')[0 ]; //각 항목의 제목을 가져옵니다.
var elems=base.getElementsByClassName('products-items-title')
for(var j=0;jvar elem =elems[j];
elem.onmousemove=function(){
//현재 객체의 상위 컨테이너 가져오기
var baseElem=this.parentElement.parentElement; var baseIndex=indexOf (obj,baseElem) 1;

//현재 개체의 좌표 가져오기
var left = this.offsetLeft;

//해당 슬라이더 개체 가져오기
var Slider= $$('products-triangle-' baseIndex)

//슬라이더 좌표 변경
slider.style.left = left "px"// 현재 개체 및 기타 개체 변경 Color
this.style.color = "red";
//현재 상위 컨테이너 아래의 모든 요소 가져오기
var Notes=this.parentElement.getElementsByClassName('products-items -제목');
for(var k=0;kif(this!=notes[k])
notes[k].style.color=" #666";
}

};
}

}
catch(e){
alert(e);
}
};
}


html 코드: