반응형
[javascript] 자동롤링되는 실시간검색어 만들기
데이터를 입히기 전, 자동롤링이 되는 실시간 검색어를 만들어보려합니다.
일반 포털사이트(네이버,다음,네이트)같은 실시간 검색어창이 아니라 심플하게 단순한 한줄자리로 만들어보았는데요.
먼저 </head> 안에 제이쿼리 스크립트를 넣어주세요.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
그다음, <body>에 해당 예제 뼈대를 만들어주시구요.
<div id="wrap">
<div class="container">
<ul id="best_search">
<li><p>인기검색어</p></li>
<li>
<dl class="time1" style="display:">
<dd><a class="t" href="#"><div class="num">1</div>자전거</a></dd>
<dd><a class="t" href="#"><div class="num">2</div>전동킥보드</a></dd>
<dd><a class="t" href="#"><div class="num">3</div>비키니</a></dd>
<dd><a class="t" href="#"><div class="num">4</div>모노키니</a></dd>
<dd><a class="t" href="#"><div class="num">5</div>원터치텐트</a></dd>
</dl>
<dl class="time2" style="display:none;">
<dd><a class="t" href="#"><div class="num">6</div>등산화</a></dd>
<dd><a class="t" href="#"><div class="num">7</div>풋살화</a></dd>
<dd><a class="t" href="#"><div class="num">8</div>요가복</a></dd>
<dd><a class="t" href="#"><div class="num">9</div>텐트</a></dd>
<dd><a class="t" href="#"><div class="num">10</div>래쉬가드</a></dd>
</dl>
<dl class="time3" style="display:none;">
<dd><a class="t" href="#"><div class="num">11</div>수영복</a></dd>
<dd><a class="t" href="#"><div class="num">12</div>디스커버리반팔티</a></dd>
<dd><a class="t" href="#"><div class="num">13</div>축구화</a></dd>
<dd><a class="t" href="#"><div class="num">14</div>노스페이스바람막이</a></dd>
<dd><a class="t" href="#"><div class="num">15</div>전기자전거</a></dd>
</dl>
<dl class="time4" style="display:none;">
<dd><a class="t" href="#"><div class="num">16</div>캠핑카</a></dd>
<dd><a class="t" href="#"><div class="num">17</div>캠핑테이블</a></dd>
<dd><a class="t" href="#"><div class="num">18</div>여성골프웨어</a></dd>
<dd><a class="t" href="#"><div class="num">19</div>여성래쉬가드</a></dd>
<dd><a class="t" href="#"><div class="num">20</div>캠핑의자</a></dd>
</dl>
</li>
<li>
<a class="best_add ad1" style="cursor:pointer" onClick="javascript:view('0')">></a>
<a class="best_add ad2" onClick="javascript:view('1')" style="display:none;cursor:pointer" >></a>
<a class="best_add ad3" onClick="javascript:view('2')" style="display:none;cursor:pointer" >></a>
<a class="best_add ad4" onClick="javascript:view('3')" style="display:none;cursor:pointer" ><</a>
</li>
</ul>
</div>
</div>
css로 디자인해주세요. <style></style>사이로 소스를 넣어주셔도 됩니다.
글꼴을 이쁘게 만들고 싶어서 나눔스퀘어 폰트를 넣었습니다만 취향에 따라 글꼴을 다르게 설정하셔도 됩니다.
@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
.normal { font-weight: 400 }
.bold { font-weight: 700 }
.bolder { font-weight: 800 }
.light { font-weight: 300 }
html,body {
padding:0px;
margin:0px;
font-family: 'NanumSquare', sans-serif;
position:relative;
}
#wrap {
margin:0px;
padding:0px;
width:100%;
}
.container {
width:1240px;
margin:0 auto;
}
a,img {
border:0px;
text-decoration:none;
}
ul,li {
list-style:none;
padding:0px;
margin:0px;
}
h1 {
color:#525252;
font-size:40px;
font-weight:100;
text-align:center;
margin:0px;
margin-top:193px;
}
h1 > b {
font-weight:900;
}
#best_search {
width:740px;
margin:0 auto;
padding-top:50px;
text-align:center;
}
#best_search li,dd {
display:inline-block;
vertical-align:middle;
}
button {
width:121px;
background-color:#0085e2;
color:#fff;
border:0px;
height:63px;
margin-left:-5px;
padding:0px;
font-size:18px;
}
#best_search li p {
color:#393939;
font-size:17px;
font-weight:bold;
margin:0px;
padding-right:30px;
}
dd {
margin:0px;
}
dd a.t{
cursor:pointer;
margin:0px;
color:#4b4b4b;
text-overflow:ellipsis;
overflow:hidden;
width:94px;
white-space:nowrap;
display:inline-block;
font-size:17px;
text-align:left;
padding-right:13px;
font-weight:700;
vertical-align:middle;
}
dd .num {
background-color:#4b4b4b;
color:#fff;
font-size:10px;
margin-right:10px;
vertical-align:middle;
width:18px;
height:18px;
float:left;
line-height:18px;
text-align:center;
}
.best_add {
border:1px solid #bebebe;
color:#4b4b4b;
padding:0px 4px;
margin-left:10px;
}
마지막으로 <script></script> 사이로 스크립트를 넣어주시면 완성입니다.
function view(arg){
$(".time1, .time2, .time3, .time4, .ad1, .ad2, .ad3, .ad4").css("display","none");
if(arg=="0") {
$(".time2, .ad2").css("display","block");
viewcount = 1;
}
else if(arg=="1") {
$(".time3, .ad3").css("display","block");
viewcount = 2;
}
else if(arg=="2") {
$(".time4, .ad4").css("display","block");
viewcount = 3;
}
else if(arg=="3") {
$(".time1, .ad1").css("display","block");
viewcount = 0;
}
}
var viewcount = 0;
var rtcarousel = setInterval(function(){ view(viewcount) },5000);
$("#best_search").mouseenter(function() {
clearInterval(rtcarousel);
});
$("#best_search").mouseleave(function() {
rtcarousel = setInterval(function(){ view(viewcount) },5000);
});
완성화면은 아래를 참고해주세요.
jsfiddle에 소스를 넣었더니 스크립트가 잘 먹히지 않아서 html 안으로 넣은 점 참고 부탁드립니다.
반응형
'[공부]하는 몽씨 > javascript' 카테고리의 다른 글
| [javascript] 현재 시간 select로 잡기 (0) | 2020.07.16 |
|---|---|
| [javascript] input 이메일 유효성 체크 (0) | 2020.03.18 |
| [javascript] on,off 스위치 만들기 (토글버튼: Togglebutton) (4) | 2017.08.21 |
| [javascript] slideup 효과로 상단배너 숨기기 (0) | 2017.07.26 |
| [javascript] select box css 디자인 (0) | 2017.07.19 |
