<div> sliding 맛보기.
ITWeb/개발일반 2011. 11. 11. 17:19그냥 버리긴 그래서.. ㅋㅋ
뭐.. 기냥 <div> 에 text 나 image 같은거 넣어 놓고.. 흐르는게 된다만 보여준 코드 임돠..(기교 전혀 없음)
다만, 같은 코드 이렇게도 쓴다. 뭐.. 그렇죠..ㅋ
(말씀 드렸듯이 노가다 이기 때문에 chrome 에서만 돌려본거구요.. 크로스브라우징 고려 안된겁니다. 그래봐야 IE 에서만 안될 것 같긴 하내요.. )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var loopTimer;
function start() {
var adWrap = document.getElementById("sahAdWrap1");
loopTimer = window.setInterval("loop()", 10);
}
function stop() {
var adWrap = document.getElementById("sahAdWrap1");
window.clearInterval(loopTimer);
}
function loop() {
var adWrap = document.getElementById("sahAdWrap1");
var debug = document.getElementById("sahDebug");
var coordy = 1;
var left = adWrap.style.left;
var leftCoord = parseInt(left.substring(0, left.length - 2), 10);
if ( leftCoord < window.innerWidth ) {
leftCoord += coordy;
} else {
leftCoord = 0;
}
debug.innerHTML = leftCoord + "<br>" + debug.innerHTML + "<br>";
adWrap.style.left = leftCoord + "px";
}
var slide = {
loopTimer:null,
start:function () {
var adWrap = document.getElementById("sahAdWrap2");
slide.loopTimer = window.setInterval("slide.loop()", 10);
},
stop:function () {
var adWrap = document.getElementById("sahAdWrap2");
window.clearInterval(slide.loopTimer);
},
loop:function () {
var adWrap = document.getElementById("sahAdWrap2");
var debug = document.getElementById("sahDebug");
var coordy = 1;
var left = adWrap.style.left;
var leftCoord = parseInt(left.substring(0, left.length - 2), 10);
if ( leftCoord < window.innerWidth ) {
leftCoord += coordy;
} else {
leftCoord = 0;
}
debug.innerHTML = leftCoord + "<br>" + debug.innerHTML + "<br>";
adWrap.style.left = leftCoord + "px";
}
}
</script>
</head>
<body>
<div id="sahAdWrap1" style="position:relative; top:0; left:0; width:320px; height:48px; background:#000000; color:#FFFFFF;" onmouseover="stop();" onmouseout="start();">Text Sliding....</div>
<br>
<button onclick="start();">Start</button> | <button onclick="stop();">Stop</button> | <button onclick="document.location.reload(true)">Reset</button>
<br>
<div id="sahAdWrap2" style="position:relative; top:0; left:0; width:320px; height:48px; background:#000000; color:#FFFFFF;" onmouseover="slide.stop();" onmouseout="slide.start();"><img src="bn.png" width="320" height="48" border="0" ></div>
<br>
<button onclick="slide.start();">Start</button> | <button onclick="slide.stop();">Stop</button> | <button onclick="document.location.reload(true)">Reset</button>
<div id="sahDebug"></div>
</body>
</html>