mootools 1.3 Framework_Mootools를 기반으로 한 이미지 슬라이딩 효과 코드-JS 튜토리얼-php.cn

mootools 1.3 Framework_Mootools를 기반으로 한 이미지 슬라이딩 효과 코드

WBOY

풀어 주다： 2016-05-16 18:07:32

원래의

1252명이 탐색했습니다.

효과 미리보기는 다음과 같습니다.
mootools 1.3 Framework_Mootools를 기반으로 한 이미지 슬라이딩 효과 코드
구현원리:
컨테이너는 상대 위치 지정을 사용하고, 그림은 절대 위치 지정을 사용합니다. 해당 그림으로 마우스 이동 시 left 속성을 변경하여 사용합니다. 애니메이션 효과를 얻기 위한 트윈 > 코드는 다음과 같습니다.

CSS 스타일

코드 복사

 코드는 다음과 같습니다.

#container{width:459px; height:200px; background-color:Black;position:relative;overflow:hidden;}

#container img{position :absolute; 너비:360px;height:300px;display:block;top :0;width:280px;height:200px;} JS:picSlider 클래스

코드 복사

 코드는 다음과 같습니다.

var picSlider = new Class({

구현: 옵션, options : { 컨테이너: "컨테이너", imgsWidth: 0.6, }, 초기화: 함수(옵션) { this.setOptions(옵션)

this.container = $(this.options.container);

this.triggers = this.container .getElementsByTagName("img"); 
this.containerWidth = this.container.getSize().x; 🎜>this.imgWidth = this.containerWidth * this.options.imgsWidth; 
 this.aveWidth = this.containerWidth / this.triggers.length; 
this.newAveWidth = (this.containerWidth - this.imgWidth) / (this.triggers.length - 1); 
this.setImgsInit(); //이미지 표시 초기화 
this.start() 
}, 
setImgsInit:function(){ 
 for(var i=0;ithis.triggers[i].setStyle("left",i*this.aveWidth) 
} 
}, 
start:function(){ 
for(var i=0; ithis.triggers[i].set("tween",{property:" left",duration:300, fps:80}); //각 요소에 대해 애니메이션 매개변수 설정 
this.triggers[i].addEvent("mouseover",this.slider.bindWithEvent(this,[i])) ;//슬라이더 함수 바인딩
} 
}, 
slider:function(e,at){ 
e.stop() 
for(var i=1;iif(i<=at) { 
this.triggers[i].get("tween").start(i*this.newAveWidth) 
}else{ 
this.triggers[i].get("tween").start(this.imgWidth (i-1)*this.newAveWidth) 
} 
} 
} 
}) ; 
new picSlider(); 



로컬에서 직접 실행하고 싶다면 

이 스크립트는 < ;div> 뒤에 있어야 하며 이유는 설명되지 않습니다!