[퍼옴 - SK그룹 http://www.sk.co.kr/]
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML Structure
<div id="wrapperAll">
<div id="sitemapSec"></div><!-- #sitemapSec -->
<div id="topArea"></div><!-- #topArea -->
<div id="wrapperCNT"></div><!-- #wrapperCNT -->
<div id="quickArea"></div><!-- #quickArea -->
<div id="footerArea"></div><!-- #footerArea -->
</div><!-- #wrapperAll -->
HTML Source
<!--//quickArea Start-->
<div id="quickArea">
<script type="text/javascript">
var quickSwf = new SWFObject("/image/flash/common/quick_menu", "quick", 95, 172);
quickSwf.addParam('wmode', 'transparent');
quickSwf.write();
</script>
<noscript>
<ul>
<li><a href="/investment/ceo/ceo_messege.php">투자정보</a></li>
<li><a href="/introduce/about/global_sk.php">About Global SK</a></li>
<li><a href="/introduce/people/knowhow.php">입사노하우</a></li>
<li><a href="/happysympathy/reply/reply.php">행복리플시즌2</a></li>
<li><a href="#wrapperAll">go Top</a></li>
</ul>
</noscript>
</div>
<script type="text/javascript">initMoving(document.getElementById("quickArea"), 250, 250, 300);</script>
<!--//quickArea End-->
CSS Source (http://www.sk.co.kr/common/css/guide.css)
html, body {height:100%; }
#wrapperAll {min-height:100%; position:relative; }
#sitemapSec {position:absolute; top:0; left:0; z-index:5; }
#topArea {position:absolute; left:0; top:0; z-index:4; }
#wrapperCNT {_height:100%; min-height:100%; position:relative; }
#quickArea {position:absolute; right:0; top:250px; overflow:hidden; }
#footerArea {width:100%; height:51px; text-align:left; position:absolute; left:0; bottom:0; z-index:30; }
JAVASCRIP Source
// scrolling layer
function initMoving(target, position, topLimit, btmLimit) {
if (!target) return false;
var obj = target;
obj.initTop = position;
obj.topLimit = topLimit;
obj.bottomLimit = document.documentElement.scrollHeight - btmLimit;
obj.style.position = "absolute";
obj.top = obj.initTop;
obj.left = obj.initLeft;
if (typeof(window.pageYOffset) == "number") {
obj.getTop = function () {
return window.pageYOffset;
}
} else if (typeof(document.documentElement.scrollTop) == "number") {
obj.getTop = function () {
return document.documentElement.scrollTop;
}
} else {
obj.getTop = function () {
return 0;
}
}
if (self.innerHeight) {
obj.getHeight = function () {
return self.innerHeight;
}
} else if (document.documentElement.clientHeight) {
obj.getHeight = function () {
return document.documentElement.clientHeight;
}
} else {
obj.getHeight = function () {
return 500;
}
}
obj.move = setInterval(function () {
if (obj.initTop > 0) {
pos = obj.getTop() + obj.initTop;
} else {
pos = obj.getTop() + obj.getHeight() + obj.initTop;
//pos = obj.getTop() + obj.getHeight() / 2 - 15;
}
if (pos > obj.bottomLimit) pos = obj.bottomLimit;
if (pos < obj.topLimit) pos = obj.topLimit;
interval = obj.top - pos;
obj.top = obj.top - interval / 3;
obj.style.top = obj.top + "px";
}, 30)
}
//scrolling layer end
'all' 카테고리의 다른 글
| 스크립트로 클래스 네임 바꿔주기 (0) | 2010.03.03 |
|---|---|
| 클래스로 이미지 롤오버 시키기 (0) | 2010.03.03 |
| CDATA [XML] (0) | 2010.03.03 |
| jQuery link (0) | 2010.03.03 |
| PNG24 백그라운드 이미지로 사용할 경우 css (0) | 2010.03.03 |