Javascript가 마우스를 위로 움직이고 작은 삼각형 슬라이더가 effect_javascript 기술을 천천히 따라갑니다.
- WBOY원래의
- 2016-05-16 17:35:171619검색
먼저 스크린샷을 찍어보겠습니다. 
해당 카테고리로 마우스를 이동하면 아래의 작은 빨간색 삼각형이 자동으로 천천히 따라옵니다.
몇 명이든 상관없습니다.
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;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"// 현재 개체 및 기타 개체 변경 Color
this.style.color = "red";
//현재 상위 컨테이너 아래의 모든 요소 가져오기
var Notes=this.parentElement.getElementsByClassName('products-items -제목');
for(var k=0;k
notes[k].style.color=" #666";
}
};
}
}
catch(e){
alert(e);
}
};
}
html 코드:
코드 복사
코드는 다음과 같습니다.
"products-items-title" ">
사무실 인쇄
위 html은 그 일부입니다. . . .
만드는 데 하루 아침이 걸렸습니다.
최신 제품
노트
< /div>디지털 비디오
액세서리
사무실 인쇄
위 html은 그 일부입니다. . . .
만드는 데 하루 아침이 걸렸습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.