Rev. 2.73

이 글은 http://www.agilepartners.com/blog 에 의해 공개된 것입니다.
Script.aculo.us의 slide.js가 담당하는 슬라이더 응용입니다. Fluxiom의 인트로 비디오에서 보았던 바로 그 효과입니다. 아래의 슬라이드 바를 조정해 보세요. 익스플로러보다 파이어폭스에서 훨씬 빠른 렌더링 속도(실시간)를 보여줍니다.

사용된 스크립트 코드입니다.

function scaleIt(v) {
	var scalePhotos = document.getElementsByClassName("scale-image");
	floorSize = .26;
	ceilingSize = 1.0;
	v = floorSize + (v * (ceilingSize - floorSize));
	for (i=0; i < scalePhotos.length; i++) {
		scalePhotos[i].style.width = (v*190)+"px";
	}
}
var demoSlider = new Control.Slider('handle1','track1', 
	{axis:'horizontal', minimum: 0, maximum:200, alignX: 2, increment: 2, sliderValue: 1});
demoSlider.options.onSlide = function(value){
	scaleIt(value);
}
demoSlider.options.onChange = function(value){
	scaleIt(value);
}

다이네믹이 느껴지나요? FloatPhoto에도 성공적으로 적용했습니다. 더불어 가로 세로, 비율 계산과 설정 값이 쿠키로 저장되게 하였죠, 실시간으로 값을 전달하는 슬라이더는 콤보박스를 대체할 수도 있고, 웹페이지를 어플리케이션 수준으로 끌어올리는데 한몫할 것입니다.

Comments