|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<style>
body, input, textarea, select, button, table {
font-family: '돋움',Dotum,Helvetica,sans-serif;
font-size: 12px;
}
ul {list-style:none;}
a {text-decoration:none;}
.lst_thum_wrap {width:670px; float:left; margin:0 30px;}
.lst_thum_wrap .lst_thum {width:100%; margin:0; padding:16px 0 0 16px; position:relative;}
.lst_thum_wrap .lst_thum:after {display:block; clear:both; content:'';}
.lst_thum_wrap .lst_thum li {width:108px; margin:0; padding:0 26px 10px 0; float:left; position:relative; vertical-align:top;}
.lst_thum_wrap .lst_thum li .mask {display:block; overflow:hidden; position:absolute; width:102px; height:102px; background:url('images/sp_mask.png') no-repeat -325px 0;}
.lst_thum_wrap .lst_thum li .ico {top:-10px; left:-12px; position:absolute; z-index:20; width:41px; height:41px; background:url('images/sp_sub_common.png') no-repeat; font-style:normal;}
.lst_thum_wrap .lst_thum li .ico_new {background-position: -184px -299px;}
.lst_thum_wrap .lst_thum li .ico_free {background-position: -92px -299px;}
.lst_thum_wrap .lst_thum li .ico_gift {background:url('images/sp_ico.png') no-repeat -120px 0;}
.lst_thum_wrap .lst_thum li .ico_vari {line-height:22px !important; font-family:Tahoma !important; font-size:10px; font-weight:bold; padding-top:8px; color:#fff; height:41px; background-position:-46px -299px; text-align:center;}
.lst_thum_wrap .lst_thum li a img {width:101px; height:101px; margin:1px 0 5px 1px;}
.lst_thum_wrap .lst_thum li a img + strong {padding:5px 0 0; line-height:18px; word-break:break-all; display:block; color:#000; white-space:normal;}
.lst_thum_wrap .lst_thum li .writer {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.lst_thum_wrap .lst_thum li .score {margin:0 0 0 -1px; display:inline-block; position:relative; width:61px; height:12px; background:url('images/sp_sub_common.png') no-repeat -732px -249px; vertical-align:middle; font-size:11px; font-weight:bold; color:#333;}
.lst_thum_wrap .lst_thum li .score span {display:block; overflow:hidden; position:relative; height:12px; background:url('images/sp_sub_common.png') no-repeat -732px -232px; line-height:999px;}
.lst_thum_wrap .lst_thum li .score_num {display:inline-block; position:relative; top:1px; font-weight:bold; font-size:11px; color:#333; vertical-align:middle; font-style:normal; left:-2px;}
.lst_thum_wrap .lst_thum li .price {display:block; margin: 4px 0 0 -2px; line-height:16px; text-align:left; white-space: normal;}
.lst_thum_wrap .lst_thum li .price strong {word-break:break-all; color:#1b8ffc;}
.flick-carousel {width:730px; position:relative; height:244px;}
.flick-carousel .flick-carousel-outer-container {overflow:hidden; position:absolute; width:730px; height:230px;}
.flick-carousel .flick-carousel-outer-container .flick-carousel-content-container {height:230px; width:10000px; white-space:nowrap;}
.flick-carousel a.flick-button-previous,
.flick-carousel a.flick-button-next {position:absolute; top:65px; width:27px; height:43px; background:url('images/sp_alsobought_bs_v2.png') no-repeat; line-height:999px; overflow:hidden; z-index:30; display:none;}
.flick-carousel a.flick-button-previous {background-position:5px -108px;}
.flick-carousel a.flick-button-previous:hover {background-position:-22px -108px;}
.flick-carousel a.flick-button-next {background-position:-49px -108px; right:0;}
.flick-carousel a.flick-button-next:hover {background-position:-76px -108px;}
.flick-carousel .flick-nav {position:absolute; bottom:6px; left:0; width:100%; margin:0; text-align:center; display:none;}
.flick-carousel .flick-nav strong,
.flick-carousel .flick-nav a {display:inline-block; overflow:hidden; width:7px; height:7px; margin:0; line-height:999px; vertical-align:middle; background:url('images/sp_alsobought_as.png') no-repeat;}
.flick-carousel .flick-nav strong {background-position:-108px -46px;}
.flick-carousel .flick-nav a {background-position:-119px -46px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
jQuery(function($) {
$.fn.extend({
flick : function(opt) {
var settings = {
speed : 400
}
$.extend(true, settings, opt);
var _this = $(this);
var _outer = _this.find('.flick-carousel-outer-container');
var _content = _outer.find('.flick-carousel-content-container');
var _items = _content.find('.lst_thum_wrap');
var itemsLen = _items.length;
if(itemsLen < 2) {
return false;
}
var itemsAvg = Math.floor(itemsLen/2);
var _btnPrev = _this.find('.flick-button-previous');
var _btnNext = _this.find('.flick-button-next');
var _btnNav = _this.find('.flick-nav');
var pos = 0;
var idx = 0;
var posIdx = 0;
var moveItem = 0;
var movePos = 0;
var outerWidth = _outer.width();
var itemWidth = _items.eq(0).outerWidth(true);
var contentWidth = itemWidth * _items.length;
var lastPos = contentWidth - outerWidth;
_content.width(contentWidth);
_btnPrev.add(_btnNext).add(_btnNav).show();
_btnPrev.on('click', function(e) {
e.preventDefault();
var nIdx = idx-1;
if(nIdx < 0) {
nIdx = itemsLen - 1;
}
setNav(nIdx);
});
_btnNext.on('click', function(e) {
e.preventDefault();
var nIdx = idx+1;
if(nIdx >= itemsLen) {
nIdx = 0;
}
setNav(nIdx);
});
function prev() {
if(moveItem > 0) {
for(var i=0; i<moveItem; i++) {
_content.find('.lst_thum_wrap').last().prependTo(_content);
}
_outer.scrollLeft(pos + itemWidth * movePos);
//console.log('이전 이동 > moveItem : ' + moveItem + ', pos : ' + (pos + itemWidth * movePos) + ' > ' + pos);
}
_outer.stop().animate({
scrollLeft : pos
}, {
duration:settings.speed,
easing : 'easeOutExpo'
});
}
function next() {
if(moveItem > 0) {
for(var i=0; i<moveItem; i++) {
_content.find('.lst_thum_wrap').first().appendTo(_content);
}
_outer.scrollLeft(pos - itemWidth * movePos);
//console.log('다음 이동 > moveItem : ' + moveItem + ', pos : ' + (pos - itemWidth * movePos) + ' > ' + pos);
}
_outer.stop().animate({
scrollLeft : pos
}, {
duration:settings.speed,
easing : 'easeOutExpo'
});
}
function setNav(nIdx) {
var _navBefore = _btnNav.children().eq(idx);
_navBefore.replaceWith($('<a />', {href : '#'}).text(idx));
var _navAfter = _btnNav.children().eq(nIdx);
_navAfter.replaceWith($('<strong />').text(nIdx));
movePos = nIdx - idx;
if(movePos > 0) {
if(movePos <= itemsAvg) {
posIdx += movePos;
if(posIdx >= itemsLen) {
moveItem = posIdx - itemsLen + 1;
posIdx = itemsLen - 1;
pos = lastPos;
} else {
moveItem = 0;
pos += itemWidth * movePos;
}
//console.log('다음(큰) > moveItem : ' + moveItem + ', posIdx : ' + posIdx);
next();
} else {
var befPosIdx = posIdx;
posIdx = posIdx + movePos - itemsLen;
movePos = befPosIdx - posIdx;
if(posIdx < 0) {
moveItem = Math.abs(posIdx);
posIdx = 0;
pos = 0;
} else {
moveItem = 0;
pos -= itemWidth * movePos;
}
//console.log('이전(큰) > moveItem : ' + moveItem + ', posIdx : ' + posIdx);
prev();
}
} else {
movePos = Math.abs(movePos);
if(movePos > itemsAvg) {
var befPosIdx = posIdx;
posIdx = posIdx - movePos + itemsLen;
movePos = posIdx - befPosIdx;
if(posIdx >= itemsLen) {
moveItem = posIdx - itemsLen + 1;
posIdx = itemsLen - 1;
pos = lastPos;
} else {
moveItem = 0;
pos += itemWidth * movePos;
}
//console.log('다음(작은) > moveItem : ' + moveItem + ', posIdx : ' + posIdx);
next();
} else {
posIdx -= movePos;
if(posIdx < 0) {
moveItem = Math.abs(posIdx);
posIdx = 0;
pos = 0;
} else {
moveItem = 0;
pos -= itemWidth * movePos;
}
//console.log('이전(작은) > moveItem : ' + moveItem + ', posIdx : ' + posIdx);
prev();
}
}
idx = nIdx;
}
$(_btnNav).on('click', 'a', function(e) {
e.preventDefault();
var _this = $(this);
setNav(parseInt(_this.text(), 10));
});
}
});
$('.flick-carousel').flick();
});
</script>
</head>
<body>
<div class="flick-carousel">
<a href="#" class="flick-button-previous"></a>
<div class="flick-carousel-outer-container">
<div class="flick-carousel-content-container">
<div class="lst_thum_wrap a0">
<ul class="lst_thum">
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_new"></em>
<img src="images/app1.png" />
<strong class="bb">000</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<img src="images/app2.png" />
<strong class="bb">[건비트2] 음악 게임의 신세계</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_gift"></em>
<img src="images/app3.png" />
<strong class="bb">이츄, 사랑의 홍차 연구소</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_free"></em>
<img src="images/app4.png" />
<strong class="bb">미투데이</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<img src="images/app5.png" />
<strong class="bb">앱</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
</ul>
</div>
<div class="lst_thum_wrap a1">
<ul class="lst_thum">
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_new"></em>
<img src="images/app6.png" />
<strong class="bb">111</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<img src="images/app7.png" />
<strong class="bb">네이버 블로그</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_gift"></em>
<img src="images/app8.png" />
<strong class="bb">이츄, 사랑의 홍차 연구소</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_free"></em>
<img src="images/app9.png" />
<strong class="bb">미투데이</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<img src="images/app10.png" />
<strong class="bb">앱</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
</ul>
</div>
<div class="lst_thum_wrap a2">
<ul class="lst_thum">
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_new"></em>
<img src="images/app11.png" />
<strong class="bb">222</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<img src="images/app12.png" />
<strong class="bb">네이버 블로그</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_gift"></em>
<img src="images/app13.png" />
<strong class="bb">이츄, 사랑의 홍차 연구소</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_free"></em>
<img src="images/app14.png" />
<strong class="bb">미투데이</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<img src="images/app15.png" />
<strong class="bb">앱</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
</ul>
</div>
<div class="lst_thum_wrap a3">
<ul class="lst_thum">
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_new"></em>
<img src="images/app11.png" />
<strong class="bb">333</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<img src="images/app12.png" />
<strong class="bb">네이버 블로그</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_gift"></em>
<img src="images/app13.png" />
<strong class="bb">이츄, 사랑의 홍차 연구소</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_free"></em>
<img src="images/app14.png" />
<strong class="bb">미투데이</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<img src="images/app15.png" />
<strong class="bb">앱</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
</ul>
</div>
<div class="lst_thum_wrap a4">
<ul class="lst_thum">
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_new"></em>
<img src="images/app11.png" />
<strong class="bb">444</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<img src="images/app12.png" />
<strong class="bb">네이버 블로그</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_gift"></em>
<img src="images/app13.png" />
<strong class="bb">이츄, 사랑의 홍차 연구소</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<em class="ico ico_free"></em>
<img src="images/app14.png" />
<strong class="bb">미투데이</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
<li>
<a href="#" title="앱이름">
<span class="mask"></span>
<img src="images/app15.png" />
<strong class="bb">앱</strong>
</a>
<span class="writer">카테고리</span>
<span class="score">
<span style="width:84%;">평점</span>
</span>
<em class="score_num">4.2</em>
<span class="price">
<strong>무료</strong>
</span>
</li>
</ul>
</div>
</div>
</div>
<a href="#" class="flick-button-next"></a>
<span class="flick-nav">
<strong>0</strong>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</span>
</div>
</body>
</html>
|
nstore_app_slide.zip