<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="EditPlus" />
<meta name="keywords" content="Keywords" />
<meta name="description" content="Description" />
<title>Title</title>
<script type="text/javascript">
//----------------------------------------------
// Floating v1.1 Source By Bermann
// dobermann75@gmail.com
// Edited By ZnMee (2008-01-13)
// znmee@naver.com
//----------------------------------------------
//new Floating(적용할개체 , 스크롤시 Y축여백 , 최상단시 Y축여백 , 미끄러지는속도:작을수록빠름..기본20 , 빠르기:작을수록부드러움..기본10);
function Floating ( FloatingObj , MarginY , TopLimit , Percentage , setTime ) {
this.FloatingObj = FloatingObj;
this.MarginY = (MarginY) ? MarginY : 0;
this.TopLimit = (TopLimit) ? TopLimit : 0;
this.Percentage = (Percentage) ? Percentage : 20;
this.setTime = (setTime) ? setTime : 10;
this.FloatingObj.style.position = "absolute";
this.Body = null;
this.setTimeOut = null;
this.Run();
}
Floating.prototype.Run = function () {
this.Body = document.documentElement.scrollTop>document.body.scrollTop ? document.documentElement : document.body;
var This = this;
var FloatingObjTop = (this.FloatingObj.style.top) ? parseInt(this.FloatingObj.style.top,10) : this.FloatingObj.offsetTop;
var DocTop = this.Body.scrollTop + this.MarginY;
var MoveY = Math.abs(FloatingObjTop - DocTop);
if ( DocTop>this.TopLimit ) {
if ( FloatingObjTop < DocTop ) {
this.FloatingObj.style.top = FloatingObjTop + Math.ceil( MoveY/this.Percentage ) + "px" ;
} else {
this.FloatingObj.style.top = FloatingObjTop - MoveY + "px" ;
}
} else {
this.FloatingObj.style.top = this.TopLimit + "px" ;
}
window.clearTimeout(this.setTimeOut);
this.setTimeOut = window.setTimeout( function () { This.Run(); } , this.setTime );
}
</script>
<style type="text/css">
#cTop { width: 650px; height: 20px; position: absolute; left: 100px; background-color: #f7f7f7; font: normal normal 12px/1.2 Gulim; color: 333533; }
#rTop { width: 100px; height: 20px; position: absolute; left: 750px; background-color: #e7e7e7; font: normal normal 12px/1.2 Gulim; color: 333533; }
</style>
</head>
<body>
<p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p><p>.<p>
<div id="cTop">중앙 레이어</div>
<div id="rTop">우측 레이어</div>
<script type="text/javascript">
new Floating(document.getElementById('cTop'),0,100,5,20);
new Floating(document.getElementById('rTop'),0,150,5,20);
</script>
</body>
</html>
'컴터 > Javascript / html' 카테고리의 다른 글
| 입력폼에 한글과 숫자만 (0) | 2008.01.23 |
|---|---|
| [펌]우측에 따라다니는 이미지 소스 (0) | 2008.01.17 |
| 한줄 롤링 .... 은 아니구 비슷하게 흉내 (0) | 2008.01.14 |
| 자바스크립트 암호화 함수 만든 사이트 (0) | 2007.12.29 |