다이나믹한 화면움직임

jQuery 로 구동되는것이구요.

코드는 대충 저 사이트에서 js 파일만 뽑아보니 다음과 같습니다.


(function($) {

var NivoSlider = function(element, options){
//Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);

//Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
running: false,
paused: false,
stop: false
};

//Get this slider
var slider = $(element);
slider.data('nivo:vars', vars);
slider.css('position','relative');
slider.addClass('nivoSlider');

//Find our slider children
var kids = slider.children();
kids.each(function() {
var child = $(this);
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
//Get img width & height
var childWidth = child.width();
if(childWidth == 0) childWidth = child.attr('width');
var childHeight = child.height();
if(childHeight == 0) childHeight = child.attr('height');
//Resize the slider
if(childWidth > slider.width()){
slider.width(childWidth);
}
if(childHeight > slider.height()){
slider.height(childHeight);
}
if(link != ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});

//If randomStart
if(settings.randomStart){
settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
}

//Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
vars.currentSlide = settings.startSlide;
}

//Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}

//Show initial link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}

//Set first background
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');

//Create caption
slider.append(
$('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
);

// Cross browser default caption opacity
$('.nivo-caption', slider).css('opacity', 0);

// Process caption function
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = $(title).html();

if(nivoCaption.css('opacity') != 0){
nivoCaption.find('p').stop().fadeTo(settings.animSpeed, 0, function(){
$(this).html(title);
$(this).stop().fadeTo(settings.animSpeed, 1);
});
} else {
nivoCaption.find('p').html(title);
}
nivoCaption.stop().fadeTo(settings.animSpeed, settings.captionOpacity);
} else {
nivoCaption.stop().fadeTo(settings.animSpeed, 0);
}
}

//Process initial caption
processCaption(settings);

//In the words of Super Mario "let's a go!"
var timer = 0;
if(!settings.manualAdvance && kids.length > 1){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}

//Add Direction nav
if(settings.directionNav){
slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav" title="Prev"></a><a class="nivo-nextNav" title="Next"></a></div>');

//Hide Direction nav
if(settings.directionNavHide){
$('.nivo-directionNav', slider).hide();
slider.hover(function(){
$('.nivo-directionNav', slider).show();
}, function(){
$('.nivo-directionNav', slider).hide();
});
}

$('a.nivo-prevNav', slider).live('click', function(){
if(vars.running) return false;
clearInterval(timer);

jquery 부분을 제외하면 대부분 css에서 컨트롤 하지만 모던브라우저가 아니면 표현하지 못합니다.
css media 부분이 가로폭에 따라 대응하는 스타일이죠~

저도 자주 쓰긴 합니다만, ie7, 8같이 표현 못하는 경우는 걍 min-width로 고정시켜버리면 문제는 끝...이라...-0-;