[jQuery] scrollTop animation

요즘 사이트를 보면 상단으로 버튼이 있는 경우가 있다. 그 때 적용할 수 있는 간단한 jQuery 애니메이션 코드이다.

<script>
$(function() {
    $("#top_button").on("click", function() {
        $("html, body").animate({scrollTop:0}, '500');
        return false;
    });
});
</script>

이 간단한 코드가 조금 전까지는 생각조차 안났다는 게 너무 신기하다. 금요일이라 정신이 잠시 외출한 게 아닐까 싶긴한데.. ㅎㅎ

[jQuery] 위에서 순차적으로 내려오는 이미지

sequential-image-drop

위 이미지와 같이 위에서 순차적으로 내려오는 이미지를 구현하기 위한 코드이다. 개발 중인 쇼핑몰 솔루션에 적용예정인데 이런 기능을 하는 jQuery 플러그인 등이 있지만 간단하게 jQuery의 each(), animate(), delay() 를 사용하면 구현할 수 있다. 약간의 css 까지 더해지면 더할나위 없을지도 모른다. 아래는 간단한 문서구조이다.

<ul>
    <li class="first">
        <div>이미지</div>
        <div>이미지</div>
        <div>이미지</div>
    </li>
    <li>
        <div>이미지</div>
        <div>이미지</div>
        <div>이미지</div>
    </li>
</ul>

그리고 아래는 css 코드이다. 아래 코드는 개념적인 코드이므로 실제 사용엔 무리가 있다.

ul { position: relative; width: 700px; height: 300px; }
li { position: absolute; top: 0; left: 0; display: none; }
li.first { display: block; }
div { float: left; position: relative; top: -300px; margin-left: 20px; }

이제 애니메이션을 실행하는 jQuery 코드를 작성해 보자.

<script>
$(function() {
    var $ct = $("li");
    var count = $ct.size();
    var c_idx = o_idx = 0;
    var height = $("ul").height();
    var a_delay = 300;
    var time = 6000;
    var a_time = 800;
    var interval = null;

    interval = setInterval(image_drop, time);
});

function image_drop()
{
    var delay = 0;
    $ct.eq(o_idx).css("display", "none");
    $ct.eq(o_idx).find("div").css("top", "-"+height+"px");

    c_idx = (o_idx + 1) % count;

    $ct.eq(c_idx).css("display", "block");
    $ct.eq(c_idx).find("div").each(function() {
        $(this).delay(delay).animate(
            { top: "+="+height+"px" }, a_time
        );
        delay += a_delay;
    });

    o_idx = c_idx;
}
<script>

위의 코드가 실행되면 6초마다 상품의 리스트가 바뀌고 리스트 각각의 상품은 0.3초의 차이를 두고 위에서 내려오기 시작한다.

[jQuery] 간단한 이미지 슬라이더

뭐 대단한 것은 아니다. 여러 장의 이미지를 이전, 다음 버튼을 클랙할 때마다 좌, 우로 슬라이딩 되면서 보여주는 게 전부이다. 이런 간단한 것을 간만에 했더니 좀 시간이 걸렸는데.. 자주 쓰던 것들도 한동안 안쓰니 머리 속에서 시원스레 지워지나 보다. ㅋ

먼저 jQuery 코드이다.

<script>
$(function() {
    var time = 500;
    var idx = idx2 = 0;
    var slide_width = $("#slider").width();
    var slide_count = $("#slider li").size();
    $("#slider li:first").css("display", "block");
    if(slide_count > 1)
        $(".btn").css("display", "inline");

    $("#prev_btn").click(function() {
        if(slide_count > 1) {
            idx2 = (idx - 1) % slide_count;
            if(idx2 < 0)
                idx2 = slide_count - 1;
            $("#slider li:hidden").css("left", "-"+slide_width+"px");
            $("#slider li:eq("+idx+")").animate({ left: "+="+slide_width+"px" }, time, function() {
                $(this).css("display", "none").css("left", "-"+slide_width+"px");
            });
            $("#slider li:eq("+idx2+")").css("display", "block").animate({ left: "+="+slide_width+"px" }, time);
            idx = idx2;
        }
    });

    $("#next_btn").click(function() {
        if(slide_count > 1) {
            idx2 = (idx + 1) % slide_count;
            $("#slider li:hidden").css("left", slide_width+"px");
            $("#slider li:eq("+idx+")").animate({ left: "-="+slide_width+"px" }, time, function() {
                $(this).css("display", "none").css("left", slide_width+"px");
            });
            $("#slider li:eq("+idx2+")").css("display", "block").animate({ left: "-="+slide_width+"px" }, time);
            idx = idx2;
        }
    });
});
</script>

다음은 HTML 코드이다.

<button type="button" id="prev_btn" class="btn">이전</button>
<button type="button" id="next_btn" class="btn">다음</button>
<ul id="slider">
    <li><img src="slider/img01.jpg"></li>
    <li><img src="slider/img02.jpg"></li>
    <li><img src="slider/img03.jpg"></li>
</ul>

그리고 마지막으로 CSS 코드이다.

#prev_btn {position:absolute;top:0;left:0}
#next_btn {position:absolute;top:0;right:0}
.btn {width:2em;height:280px;border:0;background:#f5f6fa;display:none;}

#slider {position:relative;margin:0 auto;padding:0;list-style:none;width:280px;height:280px;overflow-x:hidden}
#slider li {display:none;position:absolute;left:0;top:0}
#slider img {width:280px;height:280px}

 

이렇게 만들어 놓고.. 문득 든 생각이 슬라이딩 방향이 맞는 건가 하는.. 쓸데없을 수도 있는 생각이 들기 시작했다. 맞는 것 같기도 하면서 사람들마다 생각하는 게 다를 수도 있기 때문에.. 일단 방향을 바꿔달라고 하면 바꾸면 되니까.. 방향 바꾸는 거야 앉아서 밥먹기다. ㅋ

[jQuery] 순차적으로 내려오는 라인 서브메뉴

정확하게 제목을 쓴 것인지 모르겠는데.. 아래 그림을 보면 이해가 쉽지 않을까 싶다.

간단하게 테스트해보려고 만든 것인데 1번 메뉴가 보인 후 2번.. 이런 식으로 5번까지 메뉴가 순차적으로 위에서

아래로 내려오면서 보이게 되는 것을 구현하고 싶었다. 구글링을 통해서 간단한 소스를 찾기도 했는데 IE8에서

이상하게 작동을 해서 이 부분을 수정할 수 없을까 고민하다가 내 식대로 그냥 하나 코드를 짜게 되었다.

<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #fff; font-size: 12px; }
ul { float: left; margin: 0; padding: 0; list-style: none; }
li { float: left; width: 100px; height: 20px; background-color: #f1f1f1; text-align: center; line-height: 20px; color: #333; font-weight: bold; margin-right: 5px; margin-top: -20px; }
li.last { width: 1px; }
div { float: left; width: 700px; height: 20px; overflow-y: hidden; }
</style>
<script src=”./js/jquery-1.7.2.min.js”></script>
</head>
<body>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li class=”last”>6</li>
    </ul>
</div>

<script>
var i = 0;
var max = 0;
$(function() {
    max = $(‘li’).size() – 1;
    animate_menu(0);   
});

function animate_menu(idx)
{
    $(‘li’).eq(idx).animate(
        { “margin-top”: 0 }, 200,
        function() {
            idx++;
            if(idx < max) {
                animate_menu(idx);
            }
        }
    );
}
</script>

</body>
</html>

이 코드를 실행했을 때 IE8에서는 마지막 5번이 나온 후 1번부터 4번이 한번 더 아래로 내려가서 아예 보이지 않는

문제가 생겼는데 그것을 해결하기 위해서 마지막 6이라는 메뉴를 넣고 그건 애니메이션이 적용되지 않도록 코드를

만들어서 문제를 해결했다. 의미도 없는 6번 li를 넣는 것이 마음에 들지 않았지만 지금으로써는 이 방법 밖에 없어서

조금 더 연구해보면 다른 방법이 있지 않을까도 싶은데.. position을 이용한 방법도 테스트를 했는데 IE6과 IE7에서

원하는 결과가 나오지 않아서 결국은 이 방법을 쓰자고 정했다. 이런 거 자꾸 만들면 나만 피곤해지는데.. ㅋㅋ

요일별 방문자수 구하기

작업 중인 쇼핑몰 통계부분에서 요일별 방문자수를 구해야할 일이 생겼다. MySQL에 DATE_FORMAT 을 이용하면
나름 쉽게 처리할 수 있을 것 같아 간단하게 코드를 작성해봤다. 생각대로 원하는 결과가 나와서 아주 만족했다는..

위 이미지처럼 그래프까지 표시를 해야하는데.. 이렇게 표시하는 건 어려운게 아닌데 그래프가 위로 솟아오르는 것과
같은 애니메이션을 요구해서 결국은 jQuery의 animate() 까지 이용을 하게 됐다. 기본 작동원리는 각 요일의 방문자
총합을 구하고 그것을 배열에 저장한 후 방문자수 최대값을 구하고 이것을  기준으로 그래프 y의 최대 값을 구한 후
y 축에 값을 표시하고 그래프의 높이는 최대값일 때의 높이를 기준으로 각 비율을 계산해서 jQuery를 이용해 그래프가
그려지는 것이다. 원리는 간단한데.. 기본 실력이 없다보니 뭘하나 구현하는게 사실 쉽지가 않다. 한 2시간은 고민..

$sql_common = ” from $g4[visit_table] “;
$sql_search = ” where (1) “;

if($fr_date && $to_date) {
    if($to_date > $fr_date) {
        $sql_search .= ” and vi_date between ‘$fr_date’ and ‘$to_date’ “;
    }
} else {
    $today = date(“w”, $g4[server_time]);
    $td = 6 – $today;

    $fr_date = date(“Y-m-d”, strtotime(“-{$today} days”));
    $to_date = date(“Y-m-d”, strtotime(“+{$td} days”));

    $sql_search .= ” and vi_date between ‘$fr_date’ and ‘$to_date’ “;
}

// 요일별 방문자수
$vi_count = array();
for($i = 0; $i <=6; $i++) {
    $sql = ” select count(vi_id) as cnt
                $sql_common
                $sql_search
                and DATE_FORMAT(vi_date, ‘%w’) = ‘$i’ “;
    $row = sql_fetch($sql);

    array_push($vi_count, $row[cnt]);
}

$max_visit = max($vi_count);

// y 최대값
if($max_visit > 10) {
    if($max_visit % 10 == 0) {
        $y_max = $max_visit;
    } else {
        $y_max = ceil($max_visit / 10) * 10;
    }
} else {
    $y_max = 10;
}

$y_1 = $y_max * 0.2;
$y_2 = $y_max * 0.4;
$y_3 = $y_max * 0.6;
$y_4 = $y_max * 0.8;

// 그래프 최대 높이
$max_height = 224;

MySQL의 DATE_FORMAT(‘%w’)는 각 요일을 숫자로 반환하는데 일요일 0 이고 토요일이 6이다. <참고사이트>

<script type=”text/javascript”>
$(function() {
    <?php
    for($k = 0; $k < count($vi_count); $k++) {
        $h = ceil(($max_height * $vi_count[$k]) / $y_max) – 1;
        if($h > $max_height) {
            $h = $max_height;
        }
    ?>
    $(‘div#day<?php echo $k; ?>’).animate({ height: “<?php echo $h; ?>px” }, 1000);
    <?php
    }
    ?>
});
</script>

위 코드는 jQuery에서 그래프가 실제로 위로 솟아오르게 처리하는 부분이다. 그래프 부분은 html 코드를 작성해서 처리해야 한다.