Javascript는 마우스를 위로 움직이고 슬라이더는 효과 코드 공유_javascript 기술을 따릅니다.

먼저 스크린샷을 찍어보겠습니다.

해당 카테고리로 마우스를 이동하면 아래의 작은 빨간색 삼각형이 자동으로 천천히 따라옵니다.
몇 명이든 상관없습니다.
자바스크립트 코드:

코드 복사 코드는 다음과 같습니다.

functionchangeCoord(id, left) {
$ $(id).style.left = 왼쪽;
}

함수 $$(id) {
return document.getElementById(id);
}

함수 $$$(id) {
return document.getElementsByClassName(id)[0];
}

function indexOf(arry, obj) {
for (var i = 0; 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 try{
var base=obj[i].getElementsByClassName('products-box -center-title')[0]; //각 항목의 제목을 가져옵니다
var elems=base.getElementsByClassName('products-items-title');
for(var j=0;j var 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";
//현재 개체 및 기타 개체의 색상 변경
this.style.color = "red";
//현재 상위 컨테이너 아래의 모든 요소 가져오기
var Notes =this.parentElement.getElementsByClassName ('products-items-title');
for(var k=0;k if(this!=notes[k])
Notes[k].style.color="#666";
}

};
}

}
catch(e){
경고 (e);
}
};

}

html 코드:

코드 복사 코드는 다음과 같습니다.

 

    

     

最new商product

     

笔记本< ;/h3>

     

数码影音

     

配件

     

办公打印 h3>

     

    

    

      

       

        
         
• 
            
            
  
            LG IPS237L-BN 23英寸IPS显示器
            
  
  
           
  
            
            
  
  
           

        
       

      & lt;/div>

    

   

상면의 HTML是부분은 el表达式循环下,多搞几个。。
一个上午才做好。。。