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

Got something to add? You can just leave a comment.

  • 속도가 약간 아쉬운 감이 있군요.. Opera 도 만만찮게 느리고, IE 에서는 할말이 없네요..

    reply edit

  • 파이어준 파이어준

    에이젝스 이펙트는 요즘처럼 발전한 컴퓨팅 환경에 부합하도록 남아도는 자원을 팍팍 돌려주시는 터라 사양을 많이 탑니다. 안정적인 모습까지는 꾀 긴 시간이 필요할 듯 하네요. 스크립트를 어떻게 돌리느냐가 더 큰 난관이긴 하지만요. 그래도 FloatPhoto에서는 꽤 쌩쌩하게 돌아줍니다.

    reply edit

  • 김혜림 김혜림

    투명 조절은 안되나용?! ㅎ

    reply edit

  • 물론, 되지요 ㅎ

    reply edit

  • reply edit

  • 이메일 발송이 불가피한 환경이라 이곳에 답글 남깁니다. 이곳에 있는 모든 소스는 MIT 라이센스에 따라 사용하실 수 있습니다.(100% 저의 저작물이 아닌경우도 있으니 출처를 구분지어 밝히셔야 합니다.)

    reply edit

Your Reaction Time!

captcha

avatar