먼저 스크린샷을 찍어보겠습니다.
해당 카테고리로 마우스를 이동하면 아래의 작은 빨간색 삼각형이 자동으로 천천히 따라옵니다.
몇 명이든 상관없습니다.
자바스크립트 코드:
함수 $$(id) {
return document.getElementById(id);
}
함수 $$$(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 = function() {
//페이지의 모든 슬라이더에 대한 이벤트 등록
//products-box-center 상위 컨테이너 객체
var obj = document.getElementsByClassName( 'products-box-center');
for(var i=0;i
var base=obj[i].getElementsByClassName('products-box -center-title')[0]; //각 항목의 제목을 가져옵니다
var elems=base.getElementsByClassName('products-items-title');
for(var j=0;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";
//현재 개체 및 기타 개체의 색상 변경
this.style.color = "red";
//현재 상위 컨테이너 아래의 모든 요소 가져오기
var Notes =this.parentElement.getElementsByClassName ('products-items-title');
for(var k=0;k
Notes[k].style.color="#666";
}
};
}
}
catch(e){
경고 (e);
}
};
}
html 코드:
상면의 HTML是부분은 el表达式循环下,多搞几个。。
一个上午才做好。。。