간단한 for문 사용

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="카르테 GSP,carte,carte gsp" />
<meta name="subject" content="카르테 GSP" />
<meta name="description" content="카르테 GSP" />
<meta name="author" content="카르테" />
<meta name="copyright" content="ONNET CO.,LTD" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<title>Carte GSP</title>
<link rel="stylesheet" type="text/css" href="gsp_0215.css"   />
<script language="javascript" src="http://img.gamescampus.co.kr/js/jquery/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var pi;
pi = $(".sc_img").attr("id");

$(".sleft").css("display","none");

$(".sright").click(function(event) {
$(".sleft").css("display","inline-block");
if(pi < 4)
{
pi = ++pi; 
$(".sc_img").attr("src","images/s"+pi+".jpg");
if (pi >= 4)
{
$(this).css("display","none");
}
return false;
});
$(".sleft").click(function(event) {
$(".sright").css("display","inline-block");

if(pi > 1)
{
pi = --pi; 
$(".sc_img").attr("src","images/s"+pi+".jpg");
}
if(pi <= 1)
{
$(this).css("display","none");
}
return false;
});
});
</script>

</head>


<body>

<div id="gsp_tit_wrap">
<div class="gsp_tit">

<a class="logotxt" href="http://carte.gamescampus.co.kr">카르테</a>
<p class="swf1">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="72">
<param name="movie" value="1280_72.swf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<embed src="1280_72.swf" quality="high" pluginspage="" type="application/x-shockwave-flash" width="100%" height="72"  wmode="transparent"></embed>
<!--<![endif]-->
</object>
</p>
</div>
</div><!-- gsp_tit_wrap -->

<div id="gsp_info_wrap">
<div class="gsp_info">
<p class="swf2">
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="180">
<param name="movie" value="1280_180.swf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<embed src="1280_180.swf" quality="high" pluginspage="" type="application/x-shockwave-flash" width="100%" height="180"  wmode="transparent"></embed>
<!--<![endif]-->
</object>
</p>
</div>
</div><!-- gsp_info_wrap -->

 <div id="gsp_nation_wrap">
<div class="gsp_nation">
<a href="http://carte.gamescampus.eu/" class="ger"><span>독일</span></a>
<a href="http://carte.gamescampus.com/teaser" class="usa"><span>미국</span></a>
<a href="http://carte.gamescampus.co.kr/" class="kor"><span>한국</span></a>
<a href="#" class="jpn"><span>일본</span></a>
</div>
</div>

<div id="gsp_screen_wrap">
<div class="gsp_screen">
<div class="s_box">
<span class="lef">
<a href="#" class="sleft"><img src="images/btn_left.jpg" alt="" /></a>
</span>
<img src="images/s1.jpg" id="1" class="sc_img" alt="" />
<span>
<a href="#" class="sright"><img src="images/btn_right.jpg" alt="" /></a>
</span>
</div>
<span class="txt1">
※ 오픈 일정 및 GSP방식은 변경될 수 있으며, 변경 시 공지를 통해 안내 드리겠습니다.
</span>
<span class="txt2">
<label for="aa" style="cursor:pointer;">일주일 동안 이 창을 다시 열지 않음</label> <input type="checkbox" id="aa" />
</span>
</div>
</div>

</body>
</html>
 

'jquery' 카테고리의 다른 글

워터마크  (0) 2012.02.17
이미지 확대  (0) 2012.02.17
텍스트 크기 조절  (0) 2012.02.17
툴팁 이미지  (0) 2012.02.17
툴팁 형태로 이미지  (0) 2012.02.17
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="staticlogo.js">

/***********************************************
* Site Logo script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>
</head>

<body>

</body>
</html>

'jquery' 카테고리의 다른 글

이미지 좌우클릭  (0) 2012.02.17
이미지 확대  (0) 2012.02.17
텍스트 크기 조절  (0) 2012.02.17
툴팁 이미지  (0) 2012.02.17
툴팁 형태로 이미지  (0) 2012.02.17
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
</head>

<body>

<img src="ocean.gif" class="magnify" data-magnifyby="2.5" style="width:200px; height:150px" />

<img src="forest.gif" class="magnify" data-magnifyby="4" data-magnifyduration="1000" />

</body>
</html>

'jquery' 카테고리의 다른 글

이미지 좌우클릭  (0) 2012.02.17
워터마크  (0) 2012.02.17
텍스트 크기 조절  (0) 2012.02.17
툴팁 이미지  (0) 2012.02.17
툴팁 형태로 이미지  (0) 2012.02.17


<html>

<head>
<script type="text/javascript" src="textsizer.js">

/***********************************************
* Document Text Sizer- Copyright 2003 - Taewook Kang. All rights reserved.
* Coded by: Taewook Kang (http://www.txkang.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>

<body>

<a href="javascript:ts('body',1)">+ Larger Font</a> | <a
href="javascript:ts('body',-1)">+ Smaller Font</a>

<br /><br />
Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.
<br />
Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.
<br />
Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.
<br />
Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.
<br />
Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.
<br />
</body>

</html> 

'jquery' 카테고리의 다른 글

워터마크  (0) 2012.02.17
이미지 확대  (0) 2012.02.17
툴팁 이미지  (0) 2012.02.17
툴팁 형태로 이미지  (0) 2012.02.17
자동완성기능  (0) 2012.02.17


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="stickytooltip.js">

/***********************************************
* Sticky Tooltip script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<link rel="stylesheet" type="text/css" href="stickytooltip.css" />
</head>

<body>
<p>Some page contents here...</p>

<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
<p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
<p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" /></p>

<p>Some page contents here...</p>

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>

<div id="sticky2" class="atip" style="width:262px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>

<div id="sticky3" class="atip">
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" />
</div>

</div>

<div class="stickystatus"></div>
</div>
</body>
</html>

'jquery' 카테고리의 다른 글

이미지 확대  (0) 2012.02.17
텍스트 크기 조절  (0) 2012.02.17
툴팁 형태로 이미지  (0) 2012.02.17
자동완성기능  (0) 2012.02.17
배경 어둡게 레이어 팝업  (0) 2012.02.17
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="ddimgtooltip.css" />

<script type="text/javascript" src="ddimgtooltip.js">

/***********************************************
* Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

</head>

<body>

<p><a href="http://www.dynamicdrive.com" rel="imgtip[0]">Link 1</a></p>
<p><a href="http://javascriptkit.com" rel="imgtip[1]" style="float:right">Link 2</a></p>
<p><a href="http://cssdrive.com" rel="imgtip[2]">Link 3</a></p>
<p><a href="http://codingforums.com" rel="imgtip[3]">Link 4</a></p>

</body>
</html>

'jquery' 카테고리의 다른 글

텍스트 크기 조절  (0) 2012.02.17
툴팁 이미지  (0) 2012.02.17
자동완성기능  (0) 2012.02.17
배경 어둡게 레이어 팝업  (0) 2012.02.17
레이어 드래그  (0) 2012.02.17


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script language="javascript" src="jquery.ui.core.js"></script>
<script language="javascript" src="jquery.ui.widget.js"></script>
<script language="javascript" src="jquery.ui.position.js"></script>
<script language="javascript" src="jquery.ui.autocomplete.js"></script>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>

 </head>

 <body>
  <div class="demo">
 
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
 
</div><!-- End demo -->

 </body>
</html>

'jquery' 카테고리의 다른 글

툴팁 이미지  (0) 2012.02.17
툴팁 형태로 이미지  (0) 2012.02.17
배경 어둡게 레이어 팝업  (0) 2012.02.17
레이어 드래그  (0) 2012.02.17
custom scrollbar  (0) 2012.02.17


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>jQuery Layer Popup</title>  
 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>  
 <link type="text/css" rel="stylesheet" href="./preset.css" />  
 <style type="text/css">  
 .layer_area {position:absolute; left:50%; top:50%; background:#fff; padding:20px; border:4px solid #ddd;}  
 </style>  
 </head>  
 <body>  
 <div style="margin:30px;">
<span class="button medium"><a href="#" id="layer_open">팝업창 열기</a></span>
 </div>  
  
 <div class="layer">  
 <div class="bg"></div>  
<div class="layer_area" id="layer1">
<p style="width:400px; ">이 것은 팝업창입니다. </p><br />
<span class="button medium"><a href="#" id="layer_close">팝업창 닫기</a></span>
</div>  
 </div>  
  
 <script type="text/javascript">  
 jQuery(function($){  
function layer_open(el){  
$('.layer').fadeIn(); 
 
var temp = $('#' + el);  
if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');  
else temp.css('top', '0px');  
if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');  
else temp.css('left', '0px');  
}  

$('#layer_open').click(function(){  
layer_open('layer1');  
return false;  
});  
$('#layer_close').click(function(){  
$('.layer').fadeOut();  
return false;  
});  
$(document).ready(function(){  
});  
 });  
 </script>  
 </body>  

'jquery' 카테고리의 다른 글

툴팁 형태로 이미지  (0) 2012.02.17
자동완성기능  (0) 2012.02.17
레이어 드래그  (0) 2012.02.17
custom scrollbar  (0) 2012.02.17
썸네일 이미지 원본크기 보기  (0) 2012.02.17


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px solid red; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>

 </head>

 <body>
  <div class="demo">
 
<div id="draggable" >
<p>Drag me around</p>
</div>
 
</div><!-- End demo -->

 </body>
</html>

'jquery' 카테고리의 다른 글

자동완성기능  (0) 2012.02.17
배경 어둡게 레이어 팝업  (0) 2012.02.17
custom scrollbar  (0) 2012.02.17
썸네일 이미지 원본크기 보기  (0) 2012.02.17
왼쪽메뉴 드롭다운  (0) 2012.02.17
jquery를 이용해서 멋지게 꾸민
custom scrollbar

 

'jquery' 카테고리의 다른 글

배경 어둡게 레이어 팝업  (0) 2012.02.17
레이어 드래그  (0) 2012.02.17
썸네일 이미지 원본크기 보기  (0) 2012.02.17
왼쪽메뉴 드롭다운  (0) 2012.02.17
toggle 탭  (0) 2012.02.17
0, jqeury 의 plugin 으로 개발되어 있으므로 jquery 가 필요합니다.


1. jquery 본체외에 lightbox js, css 를 include 합니다.
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />


2. 확대를 하고 싶은 이미지가 들어가 있는 container (div, p, table등)에 적당한 id 값을 부여합니다.
    <div id="gallery">


3. 확대를 원하는 이미지에 <a 태그를 적용합니다.
    <a href="photos/image1.jpg"><img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /></a>
    a 태그에 title 을 추가시키면 확대 이미지 출력시에 해당 메시지가 아래쪽에 노출됩니다.


4. $(document).ready() 안에 아래 태그를 적용합니다.
    $('#gallery a').lightBox();
    id=gallery 에 속해 있는 a 태그에는 모두 lightbox 속성을 부여한다는 의미입니다.

'jquery' 카테고리의 다른 글

레이어 드래그  (0) 2012.02.17
custom scrollbar  (0) 2012.02.17
왼쪽메뉴 드롭다운  (0) 2012.02.17
toggle 탭  (0) 2012.02.17
배경 어둡게 레이어효과  (0) 2012.02.17


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko"><!--국문(ko) 영문(en-US) 중문(zh) 일문(ja)-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE7' />
<title>jQuery leftmenu</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/content.js"></script>
<link href="css/leftmenu.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<ul id="lm">
  <li><a href="/ui/html/web/web_01.html"  target="_self" >웹접근성이란</a></li>
  <li><a href="/ui/html/web/web_02.html" target="_self" >웹 콘텐츠 접근성 지침 2.0</a>
    <ul>
      <li><a href="/ui/html/web/web_0201.html"  target="_self" >ㆍ1.1 대체텍스트</a></li>
      <li><a href="/ui/html/web/web_0202.html"  target="_self" >ㆍ1.2 멀티미디어 대체 수단</a></li>
      <li><a href="/ui/html/web/web_0203.html"  target="_self" >ㆍ1.3 명료성</a></li>
      <li><a href="/ui/html/web/web_0204.html"  target="_self" >ㆍ2.1 키보드 접근성</a></li>
      <li><a href="/ui/html/web/web_0205.html"  target="_self" >ㆍ2.2 충분한 시간 제공</a></li>
      <li><a href="/ui/html/web/web_0206.html"  target="_self" >ㆍ2.3 광과민성 발작 예방</a></li>
      <li><a href="/ui/html/web/web_0207.html"  target="_self" >ㆍ2.4 쉬운 내비게이션</a></li>
      <li><a href="/ui/html/web/web_0208.html"  target="_self" >ㆍ3.1 가독성</a></li>
      <li><a href="/ui/html/web/web_0209.html"  target="_self" >ㆍ3.2 예측가능성</a></li>
      <li><a href="/ui/html/web/web_0210.html"  target="_self" >ㆍ3.3 콘텐츠의 논리성</a></li>
      <li><a href="/ui/html/web/web_0211.html"  target="_self" >ㆍ3.4 입력도움</a></li>
      <li><a href="/ui/html/web/web_0212.html"  target="_self" >ㆍ4.1 문법준수</a></li>
      <li><a href="/ui/html/web/web_0213.html"  target="_self" >ㆍ4.2 웹 애플리케이션 접근성</a></li>
    </ul>
  </li>
  <li><a href="/ui/html/web/web_02.html" target="_self" >웹 콘텐츠 접근성 지침 2.0</a>
    <ul>
      <li><a href="/ui/html/web/web_0201.html"  target="_self" >ㆍ1.1 대체텍스트</a></li>
      <li><a href="/ui/html/web/web_0202.html"  target="_self" >ㆍ1.2 멀티미디어 대체 수단</a></li>
      <li><a href="/ui/html/web/web_0203.html"  target="_self" >ㆍ1.3 명료성</a></li>
      <li><a href="/ui/html/web/web_0204.html"  target="_self" >ㆍ2.1 키보드 접근성</a></li>
      <li><a href="/ui/html/web/web_0205.html"  target="_self" >ㆍ2.2 충분한 시간 제공</a></li>
      <li><a href="/ui/html/web/web_0206.html"  target="_self" >ㆍ2.3 광과민성 발작 예방</a></li>
      <li><a href="/ui/html/web/web_0207.html"  target="_self" >ㆍ2.4 쉬운 내비게이션</a></li>
      <li><a href="/ui/html/web/web_0208.html"  target="_self" >ㆍ3.1 가독성</a></li>
      <li><a href="/ui/html/web/web_0209.html"  target="_self" >ㆍ3.2 예측가능성</a></li>
      <li><a href="/ui/html/web/web_0210.html"  target="_self" >ㆍ3.3 콘텐츠의 논리성</a></li>
      <li><a href="/ui/html/web/web_0211.html"  target="_self" >ㆍ3.4 입력도움</a></li>
      <li><a href="/ui/html/web/web_0212.html"  target="_self" >ㆍ4.1 문법준수</a></li>
      <li><a href="/ui/html/web/web_0213.html"  target="_self" >ㆍ4.2 웹 애플리케이션 접근성</a></li>
    </ul>
  </li>
  <li><a href="/ui/html/web/web_02.html" target="_self" >웹 콘텐츠 접근성 지침 2.0</a>
    <ul>
      <li><a href="/ui/html/web/web_0201.html"  target="_self" >ㆍ1.1 대체텍스트</a></li>
      <li><a href="/ui/html/web/web_0202.html"  target="_self" >ㆍ1.2 멀티미디어 대체 수단</a></li>
      <li><a href="/ui/html/web/web_0203.html"  target="_self" >ㆍ1.3 명료성</a></li>
      <li><a href="/ui/html/web/web_0204.html"  target="_self" >ㆍ2.1 키보드 접근성</a></li>
      <li><a href="/ui/html/web/web_0205.html"  target="_self" >ㆍ2.2 충분한 시간 제공</a></li>
      <li><a href="/ui/html/web/web_0206.html"  target="_self" >ㆍ2.3 광과민성 발작 예방</a></li>
      <li><a href="/ui/html/web/web_0207.html"  target="_self" >ㆍ2.4 쉬운 내비게이션</a></li>
      <li><a href="/ui/html/web/web_0208.html"  target="_self" >ㆍ3.1 가독성</a></li>
      <li><a href="/ui/html/web/web_0209.html"  target="_self" >ㆍ3.2 예측가능성</a></li>
      <li><a href="/ui/html/web/web_0210.html"  target="_self" >ㆍ3.3 콘텐츠의 논리성</a></li>
      <li><a href="/ui/html/web/web_0211.html"  target="_self" >ㆍ3.4 입력도움</a></li>
      <li><a href="/ui/html/web/web_0212.html"  target="_self" >ㆍ4.1 문법준수</a></li>
      <li><a href="/ui/html/web/web_0213.html"  target="_self" >ㆍ4.2 웹 애플리케이션 접근성</a></li>
    </ul>
  </li>
  <li><a href="/ui/html/web/web_02.html" target="_self" >웹 콘텐츠 접근성 지침 2.0</a>
    <ul>
      <li><a href="/ui/html/web/web_0201.html"  target="_self" >ㆍ1.1 대체텍스트</a></li>
      <li><a href="/ui/html/web/web_0202.html"  target="_self" >ㆍ1.2 멀티미디어 대체 수단</a></li>
      <li><a href="/ui/html/web/web_0203.html"  target="_self" >ㆍ1.3 명료성</a></li>
      <li><a href="/ui/html/web/web_0204.html"  target="_self" >ㆍ2.1 키보드 접근성</a></li>
      <li><a href="/ui/html/web/web_0205.html"  target="_self" >ㆍ2.2 충분한 시간 제공</a></li>
      <li><a href="/ui/html/web/web_0206.html"  target="_self" >ㆍ2.3 광과민성 발작 예방</a></li>
      <li><a href="/ui/html/web/web_0207.html"  target="_self" >ㆍ2.4 쉬운 내비게이션</a></li>
      <li><a href="/ui/html/web/web_0208.html"  target="_self" >ㆍ3.1 가독성</a></li>
      <li><a href="/ui/html/web/web_0209.html"  target="_self" >ㆍ3.2 예측가능성</a></li>
      <li><a href="/ui/html/web/web_0210.html"  target="_self" >ㆍ3.3 콘텐츠의 논리성</a></li>
      <li><a href="/ui/html/web/web_0211.html"  target="_self" >ㆍ3.4 입력도움</a></li>
      <li><a href="/ui/html/web/web_0212.html"  target="_self" >ㆍ4.1 문법준수</a></li>
      <li><a href="/ui/html/web/web_0213.html"  target="_self" >ㆍ4.2 웹 애플리케이션 접근성</a></li>
    </ul>
  </li>
</ul>



<script type="text/javascript">
j_lm('2','2');
</script>
</body>
</html>

'jquery' 카테고리의 다른 글

custom scrollbar  (0) 2012.02.17
썸네일 이미지 원본크기 보기  (0) 2012.02.17
toggle 탭  (0) 2012.02.17
배경 어둡게 레이어효과  (0) 2012.02.17
마우스 오버시 큰 이미지 레이어  (0) 2012.02.17


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script language="javascript" src="jquery.ui.core.js"></script>
<script language="javascript" src="jquery.ui.widget.js"></script>
<script language="javascript" src="jquery.ui.accordion.js"></script>
 </head>

 <body>
  <SCRIPT>
$(function() {
$( "#accordion" ).accordion();
});
</SCRIPT>

<DIV class=demo>
<DIV id=accordion>
<H3><A href="#">Section 1</A></H3>
<DIV>
<P>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </P></DIV>
<H3><A href="#">Section 2</A></H3>
<DIV>
<P>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </P></DIV>
<H3><A href="#">Section 3</A></H3>
<DIV>
<P>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </P>
<UL>
<LI>List item one</LI>
<LI>List item two</LI>
<LI>List item three</LI></UL></DIV>
<H3><A href="#">Section 4</A></H3>
<DIV>
<P>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </P>
<P>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </P></DIV></DIV></DIV><!-- End demo -->

 </body>
</html>

'jquery' 카테고리의 다른 글

썸네일 이미지 원본크기 보기  (0) 2012.02.17
왼쪽메뉴 드롭다운  (0) 2012.02.17
배경 어둡게 레이어효과  (0) 2012.02.17
마우스 오버시 큰 이미지 레이어  (0) 2012.02.17
한줄 스크롤 - 전광판처럼 기능  (0) 2012.02.17
IE 6 일때만 제외하고 효과.

<script language="javascript" src="http://img.gamescampus.co.kr/js/jquery/jquery-1.5.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$(".s_img").click(function(event) {
if (!$.browser.msie || $.browser.version != "6.0") {
$("#backgroundPopup").show();
}
$(".skc_view").show();
return false;
});
$(".skc_x").click(function(event) {
$("#backgroundPopup").hide();
$(".skc_view").hide();
return false;
});
});

</script>
</head>

<body>
<div id="backgroundPopup"></div>

<!--[if lte IE 7]>
<div class="skc_view">
<img src="images/sketch_img.jpg" alt="" />
<input type="image" src="images/sketch_x.gif" class="skc_x" alt="" />
</div>
<![endif]-->


<!-- 
ie8~ , ie 제외한 브라우저에서는 컨텐츠 내부에 심기.
(위치잡기 쉬워서..) 


....
....
....
....

-->



<!--[if gt IE 7]>
<div class="skc_view">
<img src="images/sketch_img.jpg" alt="" />
<input type="image" src="images/sketch_x.gif" class="skc_x" alt="" />
</div>
<![endif]-->
<!--[if !IE]>--> 
<div class="skc_view">
<img src="images/sketch_img.jpg" alt="" />
<input type="image" src="images/sketch_x.gif" class="skc_x" alt="" />
</div>
<!--<![endif]-->

'jquery' 카테고리의 다른 글

왼쪽메뉴 드롭다운  (0) 2012.02.17
toggle 탭  (0) 2012.02.17
마우스 오버시 큰 이미지 레이어  (0) 2012.02.17
한줄 스크롤 - 전광판처럼 기능  (0) 2012.02.17
페이지내 이동2  (0) 2012.02.17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
        <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        </script>
        <title>New Web Project</title>
        <style type="text/css">
            a img {
                border: none;
            } #largeImage {
                position: absolute;
                padding: .5em;
                background: #e3e3e3;
                border: 1px solid;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                var offsetX = 20;
                var offsetY = 10;
                
                $('a').hover(function(e){
                    //mouse on
                    var href = $(this).attr('href');
                    $('<img id="largeImage" src="' + href + '">').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX).appendTo('body');
                }, function(){
                    //mouse off
                    $('#largeImage').remove();
                });
                
                $('a').mousemove(function(e){
                    $('#largeImage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
                })
                
            });
        </script>
    </head>
    <body>
        <a href="http://static.naver.com/www/u/2010/0611/nmms_215646753.gif"><img src="http://blogimgs.naver.com/section/h_naver2.gif"></a><a href="http://static.naver.com/www/u/2010/0611/nmms_215646753.gif"><img src="http://blogimgs.naver.com/section/h_naver2.gif"></a>
    </body>
</html>

'jquery' 카테고리의 다른 글

toggle 탭  (0) 2012.02.17
배경 어둡게 레이어효과  (0) 2012.02.17
한줄 스크롤 - 전광판처럼 기능  (0) 2012.02.17
페이지내 이동2  (0) 2012.02.17
페이지내 이동1  (0) 2012.02.17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
<style>
  #tested { margin-bottom:5px; height:20px; overflow:hidden; list-style:none; line-height:120%; }
</style>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
function tested() {

  var tested = $("#tested");

  tested.animate({marginTop:"-25px"}, 200, null, function() {

    tested.css("marginTop", "0px").append(tested.find("> li:first"));

  });

}

setInterval("tested()", 2000);
</script>
 </head>

 <body>
<ul id="tested">
  <li>- aaaaa1</li>
  <li>- bbbbb2</li>
  <li>- ccccc3</li>
  <li>- ddddd4</li>
</ul>

 

 </body>
</html>

'jquery' 카테고리의 다른 글

배경 어둡게 레이어효과  (0) 2012.02.17
마우스 오버시 큰 이미지 레이어  (0) 2012.02.17
페이지내 이동2  (0) 2012.02.17
페이지내 이동1  (0) 2012.02.17
IE6 이 아닐때 액션  (0) 2012.02.17
<script type="text/javascript">
 /*******

    ***    Anchor Slider by Cedric Dugas   ***
    *** Http://www.position-absolute.com ***
    
    Never have an anchor jumping your content, slide it.

    Don't forget to put an id to your anchor !
    You can use and modify this script for any project you want, but please leave this comment as credit.
    
*****/
        


$(document).ready(function() {
    $("a.anchorLink").anchorAnimate()
});

jQuery.fn.anchorAnimate = function(settings) {

     settings = jQuery.extend({
        speed : 1100
    }, settings);    
    
    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {    
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")
            
            var destination = $(elementClick).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
              return false;
        })
    })
}
</script>

=============


본문의 링크될 책갈피에 "id" 지정.
<a name="doc" id="doc"></a> 

본문의 링크부분에 클래스 지정
<a href="#doc" class="anchorLink">본문</a> 

'jquery' 카테고리의 다른 글

마우스 오버시 큰 이미지 레이어  (0) 2012.02.17
한줄 스크롤 - 전광판처럼 기능  (0) 2012.02.17
페이지내 이동1  (0) 2012.02.17
IE6 이 아닐때 액션  (0) 2012.02.17
서브메뉴  (0) 2012.02.17
아래와 같은 코드의 추가로 페이지 맨위로 가는 스크롤탑 효과를 낼 수 있다.

$( 'html, body' ).animate( { scrollTop: 0 }, 0 );

부드러운 스크롤링 효과를 내고 싶을땐 slow를 추가해준다. 

$( 'html, body' ).animate( { scrollTop: 0 }, 'slow' );


$(document).ready(function() {
  $('.backtotop').click(function(){
     $('html, body').animate({scrollTop:0}, 'slow');
   });
});

'jquery' 카테고리의 다른 글

한줄 스크롤 - 전광판처럼 기능  (0) 2012.02.17
페이지내 이동2  (0) 2012.02.17
IE6 이 아닐때 액션  (0) 2012.02.17
서브메뉴  (0) 2012.02.17
마우스 롤오버  (0) 2012.02.17
if (!$.browser.msie || $.browser.version != "6.0") {
$("#pop_mov").css({
"position": "fixed",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
 })
}

'jquery' 카테고리의 다른 글

페이지내 이동2  (0) 2012.02.17
페이지내 이동1  (0) 2012.02.17
서브메뉴  (0) 2012.02.17
마우스 롤오버  (0) 2012.02.17
퀵메뉴  (0) 2012.02.17
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ko' lang='ko'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title> New Document </title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
</head>
<body>
<style type='text/css'>
.submenu{display:none; width:100px; position:absolute; z-index:100; border:1px solid red; }
</style>
<img src="bg_menu.png" width="880" height="38" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="rect" coords="0,0,49,24" href="#" />
    <area shape="rect" coords="50,0,99,24" href="#" />
    <area shape="rect" coords="100,-1,149,23" href="#" />
    <area shape="rect" coords="148,0,197,24" href="#" />
    <area shape="rect" coords="197,-1,246,23" href="#" />
    <area shape="rect" coords="245,0,294,24" href="#" />
    <area shape="rect" coords="294,1,343,25" href="#" />
    <area shape="rect" coords="342,1,391,25" href="#" />
</map>

<div id='menu1' class='submenu'>menu1</div>
<div id='menu2' class='submenu'>menu2</div>
<div id='menu3' class='submenu'>menu3</div>
<div id='menu4' class='submenu'>menu4</div>
<div id='menu5' class='submenu'>menu5</div>
<div id='menu6' class='submenu'>menu6</div>
<div id='menu7' class='submenu'>menu7</div>
<div id='menu8' class='submenu'>menu8</div>

<div style="width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
여기에 내용이 들어갑니다. 여기에 내용이 들어갑니다. 여기에 내용이 들어갑니다. 여기에 내용이 들어갑니다. 여기에 내용이 들어갑니다. 
</div>
<!--
white-space:nowrap;  자동줄바꿈 없이 쭉 이어지게 한다.
여기 넣은 이유는.. 말줄임 기능을 보여주기 위해 자동줄바꿈을 막은 것임
-->
<script language='javascript'>
$(document).ready(function(){
    var last_id = null;
    $('#Map area').mouseover(function(){
        if(last_id != null) last_id.hide();
        var idx = $('#Map area').index($(this)) + 1;
        var coords = $(this).attr('coords').split(',');
        if($.browser.msie) coords[0] = 0;
        var offset = $(this).offset();
        last_id = $('#menu'+idx);
        $('#menu'+idx).css({
            top : offset.top + $(this).height(),
            left : offset.left + parseInt(coords[0], 10)
        }).show();
    });
    $(document).click(function(){
        $('.submenu').hide();
    });
});

//특히 좌측 위치과 우측 위치가 차이가 나서 그런데
//            top : offset.top + $(this).height(),
//            left : offset.left + parseInt(coords[0], 10)
//이부분을 적절히 + 혹은 - 해주시면 됩니다. 
//ex) top : offset.top + $(this).height() + 30,

</script>
</body>
</html>


'jquery' 카테고리의 다른 글

페이지내 이동1  (0) 2012.02.17
IE6 이 아닐때 액션  (0) 2012.02.17
마우스 롤오버  (0) 2012.02.17
퀵메뉴  (0) 2012.02.17
iframe 내에 있는 id 찾기  (0) 2012.02.17

+ Recent posts