네이버에서 돌아가고있는 텍스트 롤링 스크립트 입니다..
예전에 퍼온건데 .. 흠 요즘에 쓸대가 있으려나 모르겠네요 .^^
<html>
<head>
<style type="text/css">
*{font-family:돋움,Dotum,AppleGothic,sans-serif;font-size:12px;color:#333;}
body,form,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,pre,fieldset,input,blockquote,th,td{margin:0;padding:0;}
ol,ul,dl{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover,a:hover b,a:hover em,a:hover span{color:#06c;text-decoration:underline;}
/*rolling Button*/
div.rollBtn{position:
div.rollBtn a.next{background-position:-22px 0px;cursor:hand;}
div.rollBtn a.previous{margin-right:3px;cursor:hand;}
div.rollBtn a span{display:none;}
#bKey{position:relative;margin-top:9px;width:270px;zoom:1;}
#bKey .keyBg{margin:1px 0 0 0;overflow:hidden;height:18px;}
#bKey ul{clear:both;}
#bKey ul li{float:left;height:18px;}
#bKey ul li.x{background:url(http://simg.paran.com/top_v2.2/top/ic_line06.gif) 100% 0 no-repeat;margin:0 7px 0 0;padding:0 7px 0 0;}
#bKey ul li a{font-weight:bold;color:#FB6A31;letter-spacing:-1px;}
#bKey .rollBtn{left:203px;top:0;}
#bKey .rollBtn .up{margin-right:3px;}
</style>
<script language="JavaScript">
// ----- GetXMLHttpRequest
var msxmlNames = new Array("MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");
function getRequest() {
if(window.ActiveXObject) {
for(var i = 0;i < this.msxmlNames.length; i++) {
try {
return new ActiveXObject(this.msxmlNames[i]);
} catch (e) {}
}
} else if(window.XMLHttpRequest) {
/* Mozilla XMLHttpRequest */
return new XMLHttpRequest();
} else {
/* None found */
return null;
}
}
// ----- GetXMLHttpRequest
// ----- AutoScrolling
var timeout1 = null;
var timeout2 = null;
var timeout3 = null;
function scrolling(objId,sec1,sec2,speed,height){
this.objId=objId;
this.sec1=sec1;
this.sec2=sec2;
this.speed=speed;
this.height=height;
this.h=0;
this.div=document.getElementById(this.objId);
this.htmltxt=this.div.innerHTML;
this.div.innerHTML=this.htmltxt+this.htmltxt;
this.div.isover=false;
this.div.onmouseover=function(){this.isover=true;}
this.div.onmouseout=function(){this.isover=false;}
var self=this;
this.div.scrollTop=0;
timeout1 = window.setTimeout(function(){self.play()},this.sec1);
}
scrolling.prototype={
play:function(){
var self=this;
if(!this.div.isover){
this.div.scrollTop+=this.speed;
if(this.div.scrollTop>this.div.scrollHeight/2){
this.div.scrollTop=0;
}else{
this.h+=this.speed;
if(this.h>=this.height){
if(this.h>this.height|| this.div.scrollTop%this.height !=0){
this.div.scrollTop-=this.h%this.height;
}
this.h=0;
timeout2 = window.setTimeout(function(){self.play()},this.sec1);
return;
}
}
}
timeout3 = window.setTimeout(function(){self.play()},this.sec2);
},
prev:function(){
if(this.div.scrollTop == 0)
this.div.scrollTop = this.div.scrollHeight/2;
this.div.scrollTop -= this.height;
},
next:function(){
if(this.div.scrollTop == this.div.scrollHeight/2)
this.div.scrollTop =0;
this.div.scrollTop += this.height;
}
};
// ----- AutoScrolling
var scrollData = null;
// ----- GetData
function getData() {
var req = getRequest();
req.onreadystatechange = function() {
if(req.readyState == 4 && req.status == 200) {
scrollData = req.responseText;
reStartScroll("jFavList");
}
}
req.open("GET", "목록을 text/plain 으로 내려주는 url");
req.send(null);
};
// ----- GetData
// ----- ReStartScroll
function reStartScroll(divID) {
var div = document.getElementById(divID);
window.clearTimeout(timeout1);
window.clearTimeout(timeout2);
window.clearTimeout(timeout3);
div.innerHTML = scrollData;
new scrolling(divID,1000,1,1,18);
};
// ----- ReStartScroll
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="bKey">
<div id="jFavList" class="keyBg">
<ul><li>좋은소스</li></ul><ul><li>감사감사</li></ul><ul><li>근데...</li></ul><ul><li>어디서퍼왔더라</li></ul>
</div>
<script type="text/javascript"> new scrolling("jFavList",1000,1,1,18); </script>
</div>
</td>
</tr>
</table>
<br> <br>
<input type="button" value="updateData" onclick="getData()"/>
</body>
</html>
'[Program] > [Html & Javascript]' 카테고리의 다른 글
| 스크롤 따라다니는 이미지.^^ (0) | 2014.04.15 |
|---|---|
| JQuery Datepicker 를 이용한 달력. (0) | 2014.04.15 |
| 내 홈페이지에 트위터 위젯을 달자^^ (0) | 2014.04.15 |
| 색상 코드표 입니다.. (0) | 2014.04.15 |
| 영문 때문에 테이블 사이즈가 늘어나는 경우 (0) | 2014.04.15 |
