SIR 메인 HOT SKIN/BUILDER 효과 순차롤링 최신글
팁이라기보단 SIR 에 실제 쓰인 그대로를 옮겨봅니다.
주의! doctype 혹은 기타 css 충돌 등으로 100% 실행되지 않을 수 있습니다. 자신의 사이트에 맞춰서 변경해 쓰세요.
1. 최근게시물을 불러올 자리 마크업
dtd html5 이시면 section 을 그대로 사용하셔도 되지만, 아닌 경우 section 을 div 로 변경하고 사용하세요.
<section id='i_hot'>
<h2><span></span>최근 뜨는 스킨</h2>
<ul>
<li id='i_hot_skin'>
<h3><span></span>스킨</h3>
최근게시물 불러오는 자리
<div><a href='<?=$g4['path']?>/bbs/board.php?bo_table=g4_skin'><span></span>더보기</a></div>
</li>
<li id='i_hot_bd'>
<h3><span></span>빌더</h3>
최근게시물 불러오는 자리
<div><a href='<?=$g4['path']?>/bbs/board.php?bo_table=g4_builder'><span></span>더보기</a></div>
</li>
</ul>
</section>
2. 최근게시물 스킨
latest.skin.php 로 만들 소스
<ol>
<?
//for 문 자리 : 기본 베이직 최근게시물 스킨을 참조해서 코드를 넣으세요.
?>
<li>
<a href='<?=$list[$i]['href']?>'><span class='i_hot_title'><?=$list[$i]['subject']?></span></a>
<span class='i_senskin_author'><?=$list[$i]['tmp_name']?></span>
<span class='i_senskin_date'><?=$date?></span>
</li>
<?
//for 문 끝나는 자리
?>
</ol>
3. CSS
<style>
#i_hot {clear:both;position:relative;margin-bottom:5px;width:100%;height:225px;background:url('../img/index.png') #000 0 -190px;zoom:1}
#i_hot:after {display:block;visibility:hidden;clear:both;height:0;content:""}#i_hot h2, #i_hot h3 {width:0;height:0;overflow:hidden}
#i_hot ul {position:relative}
#i_hot ul li {position:relative;float:left;padding-top:80px;padding-left:47px;width:393px}
#i_hot ul li ol {list-style:none}
#i_hot ul li ol li {display:none;float:none;padding:0;padding-top:4px;height:26px;width:auto}
#i_hot ul li ol li span {display:inline-block}
#i_hot ul li ol li .i_hot_title {margin-right:10px;width:230px;height:13px;color:#7aa6c7;vertical-align:middle;overflow:hidden}
#i_hot ul li ol li .i_hot_author {margin-right:5px;width:82px;color:#8596a2;text-align:center}
#i_hot ul li ol li .i_hot_date {width:50px;color:#8596a2;text-align:center}
#i_hot #i_hot_skin div {position:absolute;top:50px;left:130px;width:60px;height:20px}
#i_hot #i_hot_skin div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -130px -240px}#i_hot #i_hot_bd div {position:absolute;top:50px;left:120px;width:60px;height:20px}
#i_hot #i_hot_bd div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -560px -240px}
</style>
4. jquery
jquery 는 하단에 넣으시기 바랍니다.
<script>
$(document).ready(function(){
// ///////////SENSATIONAL SKIN 롤링
var $intervalll = 0; // 롤링 간격 설정
for (var i=1; i<6; i++ ) {
if (i > 1) { $intervalll = $intervalll + 1000; } // 첫 롤링은 바로 실행
$('#i_hot ul li ol li:nth-child('+i+')').delay($intervalll).slideDown('fast');
}});</script>
5. 사용된 이미지
이미지에서 해당부분만 잘라내서 사용하세요.
이 이미지를 그대로 사용하지 않을 경우 수정해야 하는 부분#i_hot {clear:both;position:relative;margin-bottom:5px;width:100%;height:225px;background:url('../img/index.png') #000 0 -190px;zoom:1}#i_hot #i_hot_skin div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -130px -240px}#i_hot #i_hot_bd div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -560px -240px}
하늘색 부분을 자신의 사이트 경로에 맞게 수정하세요.
클릭하시면 원본 사이즈로 다운받으실 수 있습니다. ㅎㅎㅎ
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 9개
어디에 어떻게 들어가있다만 정리한 겁니다.