[jQuery] 가로 슬라이딩 연혁 표시
이런 걸 만들어 달라고 해서 간만에 jQuery 붙잡고 무한 삽질 코딩.. ㅋ 쉽게 하는 게 있을텐데.. 왜 자꾸 삽질을??
<div class=”history_navi”>
<div class=”nav_left nav_left_dis”></div>
<div class=”nav_right nav_right_act”></div>
</div>
<div class=”history_wrap”>
<div class=”history_list”><span id=”history_image”><img src=”<?php echo $g4[company_img_path]; ?>/company_history_content2.png” alt=”” /></span></div>
</div><!– /history_wrap –>
<script type=”text/javascript”>
var history_start = 0;
var history_end;
var hostory_position;
$(function() {
history_end = $(‘#history_image’).width() – (270 * 2);
$(‘.nav_left’).click(function() {
if($(this).hasClass(“nav_left_act”)) {
history_start += 270;
history_end += 270;
history_position = history_start + “px”;
$(‘#history_image’).animate({ “margin-left”: history_position }, 1000);
if(history_start == 0) {
$(this).removeClass(“nav_left_act”);
$(this).addClass(“nav_left_dis”);
}
if(history_end >= 270) {
$(‘.nav_right’).removeClass(“nav_right_dis”);
$(‘.nav_right’).addClass(“nav_right_act”);
}
}
});
$(‘.nav_right’).click(function() {
if($(this).hasClass(“nav_right_act”)) {
history_start -= 270;
history_end -= 270;
history_position = history_start + “px”;
$(‘#history_image’).animate({ “margin-left”: history_position }, 1000);
if(history_end < 270) {
$(this).removeClass(“nav_right_act”);
$(this).addClass(“nav_right_dis”);
}
if($(‘.nav_left’).hasClass(“nav_left_dis”)) {
$(‘.nav_left’).removeClass(“nav_left_dis”);
$(‘.nav_left’).addClass(“nav_left_act”);
}
}
});
});
</script>
코드에서 270은 연혁이 나오는 부분의 가로가 270으로 정했기 때문이다. 근데 코드 참 거시기 하다. ㅋㅋ