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}
하늘색 부분을 자신의 사이트 경로에 맞게 수정하세요.
클릭하시면 원본 사이즈로 다운받으실 수 있습니다. ㅎㅎㅎ
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 9개
어디에 어떻게 들어가있다만 정리한 겁니다.