'Web'에 해당되는 글 77건

Css default

2012. 3. 13. 13:39 Web/CSS

/*********************************************
*  Huckleberry Mit Reset : 2012.03.11
*********************************************/
/*MASTER*/
*{margin:0;padding:0; font-family:'돋움',dotum,Helvetica,sans-serif;}
html,body{width:100%; height:100%;}
html{overflow-y:scroll;}
body{background-color:#fff; *word-break:break-all; -ms-word-break:break-all;}
body,h1,h2,h3,h4,h5,h6,input,textarea,select,option,button,th,td{font-size:12px; color:#555;}
img,fieldset,iframe{border:0 none;}
li{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover,a:focus{color:#000;text-decoration:underline;}
em,address,dfn{font-style:normal;}
button,label{cursor:pointer;_cursor /**/:hand;}
button *{position:relative;}
button img{left:-3px;*left:auto;}
textarea{overflow:auto;}
html:first-child select{height:20px;padding-right:6px;}
option{padding-right:6px;}

/* COMMON*/
.input_text,textarea{*margin:-1px 0;padding-right:1px;}
.input_check,.input_radio{width:13px;height:13px;}
legend{display:block;overflow:hidden;position:absolute;top:-1000em;left:0;}
hr{display:none;}
legend{*width:0;}
:root legend{margin-top:-1px;font-size:0;line-height:0;}

/*HIDDEN*/
.blind{display:block;overflow:hidden;position:absolute;top:-1000em;left:0;}
.hidden{visibility:hidden; width:0; line-height:0; font-size:0;}

/*SKIP*/
.skip{}
.skip a{display:block; position:absolute; left:0; top:-1000em;z-index:9999; width:100%; background-color:navy; font-size:1.4em; font-weight:bold; color:yellow; text-align:center;}
.skip a:hover,.skip a:focus,.skip a:active{top:0; padding:1.5em 0;}

/*TEST*/
.t{border:1px solid red;}
.tbg{background:red;}


마우스 따라다니는 퀵메뉴

2012. 3. 13. 13:26 Web/javascript

js폴더에 아래 스크립트를 삽입한후,

/*퀵메뉴 스크립트*/
var viewstart; // 위쪽 여백 (메뉴가 위에서 ''픽셀 떨어진 곳에 보여집니다)
var viewscroll = 0; // 스크롤시 브라우저 위쪽과 떨어지는 거리
var viewbottom = 80; // 스크롤시 마지막 바닥값
var quickbase = 500; // 스크롤 시작위치
var activatespeed = 10;
var scrollspeed = 20;

var quicktimer;
var quick_obj;

function refresh_quick(){
 var quickstartpoint;
 var quickendpoint;
 bottomlimit = document.documentElement.scrollHeight - viewbottom;
 quickstartpoint = parseInt(quick_obj.style.top, 10);
 quickendpoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + viewscroll;
 if (quickendpoint < viewstart){
  quickendpoint = viewstart;
 }
 if (quickendpoint > bottomlimit){
  quickendpoint = bottomlimit;
 }
 if (quickstartpoint != quickendpoint){
  stmnScrollAmount = Math.ceil( Math.abs( quickendpoint - quickstartpoint ) / 15 );
  quick_obj.style.top = parseInt(quick_obj.style.top, 10) + ( ( quickendpoint < quickstartpoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px';
 }
 quicktimer = setTimeout("refresh_quick();", activatespeed);
}
function initializequick(obj,left,starttop){
 quick_obj = document.getElementById(obj);
 viewstart = starttop;
 quick_obj.style.position = 'absolute';
 quick_obj.style.left = left + 'px';
 quick_obj.style.top = document.body.scrollTop + quickbase + 'px';
 refresh_quick();
}
function ScrollTop(){
 self.window.scroll(0,0);
}



---------------------------------------------------------------

<script type="text/javascript" src="./js/topscroll.js"></script>
<div id="quick">
 <h1 class="blind">퀵메뉴</h1>
 <img src="./img/Quick.gif" alt="#" usemap="#top" />
 <map name="top">
  <area shape="rect" coords="8,89,68,113" href="#" target="_self">
  <area shape="rect" coords="16,129,59,141" href="#" target="_self">
 </map>
 <script type="text/javascript">
  initializequick("quick",992,376);
 </script>
</div>

'Web > javascript' 카테고리의 다른 글

클릭시 팝업창 띄우기  (0) 2012.04.12
팝업 스크립트  (0) 2012.03.29
버튼 클릭시 레이어 팝업 띄우기  (0) 2012.03.23
서브네비  (2) 2012.03.14
이미지맵으로 주소창 없는 새창 띄우기  (0) 2012.03.14
Copyright © HuckleberryM All Rights Reserved | JB All In One Designed by CMSFactory.NET