<!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="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
.lodding{width:65px; height:71px; border:1px #F00 solid; margin:150px auto;}

</style>
<script type="text/javascript">

  jQuery(function(){

   setInterval(playload,100);

   var heightMove = 0;
   var swe = true;
   function playload(){
    heightMove -= 71;
    heightMove;

    if(heightMove<-5112){
     //consloe.log('실행');
     heightMove = 0;
    }else{
     $('.lodding').css('background','url(http://dept.galleria.co.kr/web/img/motionicon/scroll.png) no-repeat 0 '+heightMove+'px');
    }
   }

   $('.lodding').css('position','absolute').animate({
    left:'400px'
   },{
    duration:4000,
    step:function(){
     if($('.lodding').position().left>399 && swe){
      swe = false;
      $('.lodding').stop().animate({
       marginTop : '0px'
      });


     }
    } // 4초동안 위의 동작을 하는 동안 값 추출 (위의 동작으로는 좌표값을 알 수 있음)
   });

  });

</script>
</head>
<body style="background:#000">

</div>

</body>

</html>

'jQuery' 카테고리의 다른 글

jquery 플러그인 (0)	2015.07.14
배너2 (0)	2014.05.15
이미지 배너 (0)	2014.05.13
div 안에 있는 엘리먼트 합 구하기 (0)	2013.02.03
신현석님 Jquery AIP 정리 (1)	2012.08.29

:

배너2

jQuery 2014. 5. 15. 21:49

<!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="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>study-banner1</title>
  <style type="text/css">
   body, ul, li {margin:0; padding:0;}
   ul {list-style: none; padding:30px; background:#FFFF00; text-align:center; height:202px;}
   ul li img {display:none; position:absolute; left:50%; top:30px; margin-left:-155px; width:309px; height:202px;}
   ul li.on img {display:block;}
   ul li { display:inline-block; padding-top:180px}
   ul li a {display:block; position:relative; z-index:1; height:15px; width:15px; border:1px red solid; background:#fff;}
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
   jQuery(function(){

    var color = ["red","yellow","green"];
    //var colorNum = color.length;
    var liMenu = $("#banner>li").length;

    var menu = $("#banner>li").index();

    var timeRun = setInterval(count,2000);


    $("#banner>li").hover(function(){
     clearInterval(timeRun);
    },function(){
     timeRun = setInterval(count,2000);
     //setInterval(count,2000);
    });

    $("#banner>li>a").hover(function(){
     var menu = $(this).parent('li').index();



     /*$('#banner>li:eq('+menu+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[menu]);*/
     move(menu);
    });


    function move(arg){

     $('#banner>li:eq('+arg+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[arg]);

    }


    function count(){
     menu +=1;
     move();
     /*
     $('#banner>li:eq('+menu+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[menu]);
     */

     if(menu == liMenu){
      menu = -1; //위에서 한번 더하기 때문에 0이 아닌 -1을 해준다
     }
    }

    /*
    function test (x) {
     z = x+y;
    }

    alert(test (1,3));
    */
   });
  </script>
</head>

'jQuery' 카테고리의 다른 글

jquery 플러그인 (0)	2015.07.14
0527 duration (0)	2014.05.27
이미지 배너 (0)	2014.05.13
div 안에 있는 엘리먼트 합 구하기 (0)	2013.02.03
신현석님 Jquery AIP 정리 (1)	2012.08.29

:

이미지 배너

jQuery 2014. 5. 13. 21:56

<!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="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>0513</title>
  <style type="text/css">
   body, ul, li {margin:0; padding:0;}
   ul {position:relative; margin:30px; list-style:none; width:309px; text-align: right;}
   ul li { display:inline-block; font-size:0; line-height:0; padding:0 2px;}
   ul li a {display:block; width:12px; height:12px; border:1px orange solid; border-radius:10px; background:yellow;}
   ul li img {display:none; position:absolute; right:0; top:22px;}
   ul li.on img {display:block; }
   ul li.on a {background:red; }
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
   jQuery(function(){

    //return false;
    //멈춤(멈춘 후 거꾸로 진행), 진행, 반환

    $("#banner>li:first").addClass ('on');

    var chNum = 0;
    var timerId = setInterval(count,2000);

      $('#banner>li').hover(function () {
        $(this).css('cursor','pointer');
        clearInterval(timerId);
      },function(){
     $(this).css('cousr','Default');
     timerId = setInterval(count,1000);
      });

    $("#banner>li>a").hover(function(){
     chNum = $(this).parent('li').index();
     //마우스를 올렸을때
     //console.log($(this).html());
     //console.log($(this).parent('li').index());
     //$(this).addClass('on');
     //siblings 형제노드
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     ch(chNum);

    },function(){
     //마우스가 나갔을때
     //$('#banner>li:eq('+chNum+')').removeClass('on');
    });



    function ch(arg){ //arg = chNum
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     $('#banner>li:eq('+arg+')').addClass('on').siblings('li').removeClass('on');
    }


    function count(){

     chNum += 1;
     ch(chNum);
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');

     if(chNum == 4){
        chNum = -1; //현재 위치에서는 0 이 아닌 -1로 셋팅 --> 위에서 +1을 하고 있음

     }
    }

   });

  </script>
</head>
<body>
  <ul id="banner">
   <li><a href="#a" title="이벤트1"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban__taiwan_140429.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트2"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_aus_140430.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트3"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_140421.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트4"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hsbn_140411_cam(0).jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트5"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_cb_140429.jpg" alt="" />
   </li>
  </ul>
</body>
</html>

'jQuery' 카테고리의 다른 글

0527 duration (0)	2014.05.27
배너2 (0)	2014.05.15
div 안에 있는 엘리먼트 합 구하기 (0)	2013.02.03
신현석님 Jquery AIP 정리 (1)	2012.08.29
마우스오버 아웃 (0)	2012.07.10

:

div 안에 있는 엘리먼트 합 구하기

jQuery 2013. 2. 3. 19:21

});
</script>

'jQuery' 카테고리의 다른 글

배너2 (0)	2014.05.15
이미지 배너 (0)	2014.05.13
신현석님 Jquery AIP 정리 (1)	2012.08.29
마우스오버 아웃 (0)	2012.07.10
웹접근성에 맞는 탭메뉴 (0)	2012.07.02

:

신현석님 Jquery AIP 정리

jQuery 2012. 8. 29. 15:43

http://hyeonseok.com/soojung/javascript/2011/06/04/658.html

'jQuery' 카테고리의 다른 글

이미지 배너 (0)	2014.05.13
div 안에 있는 엘리먼트 합 구하기 (0)	2013.02.03
마우스오버 아웃 (0)	2012.07.10
웹접근성에 맞는 탭메뉴 (0)	2012.07.02
jQuery IE 버전에 Placeholder 적용하기 (0)	2012.06.26

:

마우스오버 아웃

jQuery 2012. 7. 10. 18:08

아.....같은건데...ie6 에서만 깜빡이는건 뭥미..ㅠㅠ

$(".shop").mouseover(function () {
   $(".shop ul").addClass('on'); }).mouseout(function () {
   $(".shop ul").removeClass('on');
   });

위에건 ie6에서 마우스를 이동하면 깜빡깜빡...

아래건 마우스 이동해도 멀쩡~

$(".shop").hover(
    function(){$(".shop ul").addClass('on'); },
    function(){$(".shop ul").removeClass('on');
   });

위에처럼 구현하면 동작은 되는데 접근성은 아예 안된다. 후.....

'jQuery' 카테고리의 다른 글

div 안에 있는 엘리먼트 합 구하기 (0)	2013.02.03
신현석님 Jquery AIP 정리 (1)	2012.08.29
웹접근성에 맞는 탭메뉴 (0)	2012.07.02
jQuery IE 버전에 Placeholder 적용하기 (0)	2012.06.26
폼 요소 선택자 (0)	2012.03.13

:

웹접근성에 맞는 탭메뉴

jQuery 2012. 7. 2. 15:12

웹접근성에 맞는 탭메뉴

탭메뉴는 일반적으로 일반사람이 이용하기 편하도록 제작됩니다.

그렇기 떄문에 접근성을 고려하지 않는다면 장애인이 이용하기 굉장히 어려움이 있죠..

탭메뉴는 일반적으로 많이 쓰고 앞으로도 많이 쓸수 있기떄문에 한번 접근성을 고려해서 만들어보도록 하죠.

탭키로 이동가능한 탭메뉴
순차적으로 의미전달
her=값에 id로 링크 전달
스크립트가 지원하지 않아도 내용전달

이 4가지 사항으로 접근성에 준수할 수 있습니다.

물론 이미지로 들어간다면 alt도 들어가야 하겠죠 ^^

예제 : http://webcss.co.kr/html5/tab.html

<!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>
<style type="text/css">
/* Lined Tab */
.Tab ul{ position:relative; margin:0; padding:0; list-style:none; border-bottom:1px solid #ccc; font-family:Tahoma, Sans-serif; font-size:12px; }
.Tab ul:after{ content:""; display:block; clear:both;}
.Tab li{ float:left; margin-bottom:-1px;}
.Tab li a{position:relative; float:left; text-decoration:none; border:1px solid #eee; border-bottom-color:#ccc; background:#fafafa; color:#666;}
.Tab li a span{display:inline-block; padding:6px 25px 6px 25px; letter-spacing:-1px; cursor:pointer;}
.Tab li div{display:none; width:100%; position:absolute; top:28px; left:0; list-style:none; border:0; margin:0; padding:0; white-space:nowrap; overflow:hidden;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;padding:20px 0;text-align:center;}
.Tab.m1 .m1 a,.Tab.m2 .m2 a,.Tab.m3 .m3 a{ border:1px solid #ccc; border-bottom:1px solid #fff; margin-top:-1px; background:transparent; color:#333;}
.Tab.m1 .m1 a span,.Tab.m2 .m2 a span,.Tab.m3 .m3 a span{ padding-top:7px; font-weight:bold;}
.Tab.m1 .m1 div,.Tab.m2 .m2 div,.Tab.m3 .m3 div{ display:block;}
.Tab li li a:hover,.Tab li li a:active,.Tab li li a:focus{ font-weight:bold; letter-spacing:-1px; color:#333 !important;}
.Tab.jsOff {padding:0;}
.Tab.jsOff ul {border:0 none;}
.Tab.jsOff li {float:none;}
.Tab.jsOff li a {background:none !important;border-color:#EEEEEE #EEEEEE #CCCCCC !important;border-style:solid !important;border-width:1px !important;color:#333333;display:block;float:none;font-weight:bold;}
.Tab.jsOff li div {display:block;left:0;padding:5px 0;position:static;top:0;}

</style>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
var tab = $('.Tab');
tab.removeClass('jsOff');
function onSelectTab(){
var t = $(this);
var myclass = [];
t.parentsUntil('.Tab:first').filter('li').each(function(){
myclass.push( $(this).attr('class') );
});
myclass = myclass.join(' ');
if (!tab.hasClass(myclass)) tab.attr('class','Tab').addClass(myclass);
}
tab.find('li>a').click(onSelectTab).focus(onSelectTab);
});
</script>
</head>
<body>
<div class="Tab m1 jsOff">
<ul>
<li class="m1"><a href="#view1"><span>메뉴 1</span></a>
<div id="view1">
메뉴 1의 내용입니다.
</div>
</li>
<li class="m2"><a href="#view2"><span>메뉴 2</span></a>
<div id="view2">
메뉴 2의 내용입니다.
</div>
</li>
<li class="m3"><a href="#view3"><span>메뉴 3</span></a>
<div id="view3">
메뉴 3의 내용입니다.
</div>
</li>
</ul>
</div>
</body>
</html>

<일반적인 화면입니다>

<자바스크립트를 지원하지 않을때 화면입니다. >

<css를 지원하지 않았을때 화면입니다.>

소스보시고 어려운것은 없으니 공부하시면 될꺼 같습니다.

그럼 열공하세요 ^^

[출처] 웹접근성에 맞는 탭메뉴|작성자 머리깨져

'jQuery' 카테고리의 다른 글

신현석님 Jquery AIP 정리 (1)	2012.08.29
마우스오버 아웃 (0)	2012.07.10
jQuery IE 버전에 Placeholder 적용하기 (0)	2012.06.26
폼 요소 선택자 (0)	2012.03.13
각종 예제 사이트 (0)	2011.07.11

:

jQuery IE 버전에 Placeholder 적용하기

jQuery 2012. 6. 26. 16:50

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>알찬돌삐</title>
<style type="text/css">
label.absolute {
position: absolute;
color:#999;
display: none;
cursor: text
}
input.focusbox {
border:1px solid #23adb2;
}
input:focus {
outline: #23adb2 solid thin
}
input { padding:4px 1px 3px 5px; border-top:1px solid #b5b5b5; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #b5b5b5; }
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7.1");
</script>
</head>
<body>

<input type="text" name="test" placeholder="아이디" style="width:120px" value="">
<br>
<input type="password" name="password" placeholder="비밀번호" style="width:120px" value="">

<script type="text/javascript">
jQuery(function () {
if (!("placeholder" in document.createElement("input"))) {
jQuery(":input[placeholder]").each(function () {
var $this = jQuery(this);
var pos = $this.offset();
if (!this.id) this.id = "jQueryVirtual_" + this.name;
if (this.id) {
if (jQuery.browser.version < 8) {
$this.after("<label for='" + this.id + "' id='jQueryVirtual_label_" + this.id + "' class='absolute'>" + $this.attr("placeholder") + "</label>");
$("#jQueryVirtual_label_" + this.id).css({"left":(pos.left+5), "margin-top":3, "width":$this.width()});
}
else {
$this.after("<label for='" + this.id + "' id='jQueryVirtual_label_" + this.id + "' style='left:" + (pos.left+5) + "px;margin-top:2px' class='absolute'>" + $this.attr("placeholder") + "</label>");
}
}
}).focus(function () {
var $this = jQuery(this);
$this.addClass("focusbox");
jQuery("#jQueryVirtual_label_" + $this.attr("id")).hide();
}).blur(function () {
var $this = jQuery(this);
$this.removeClass("focusbox");
if(!jQuery.trim($this.val())) jQuery("#jQueryVirtual_label_" + $this.attr("id")).show();
else jQuery("#jQueryVirtual_label_" + $this.attr("id")).hide();
}).trigger("blur");
}
});
</script>
</body>
</html>

출처: http://www.i-swear.com/703

확인 : http://jsfiddle.net/d9bnV/

'jQuery' 카테고리의 다른 글

마우스오버 아웃 (0)	2012.07.10
웹접근성에 맞는 탭메뉴 (0)	2012.07.02
폼 요소 선택자 (0)	2012.03.13
각종 예제 사이트 (0)	2011.07.11
JQuery mobile (0)	2011.07.07

:

폼 요소 선택자

jQuery 2012. 3. 13. 10:52

+= 왼쪽의 값에서 오른쪽을 더해서 왼쪽에 대입
-= 왼쪽의 값에서 오른쪽을 뺴서 왼쪽에 대입
*= 양쪽을 곱해서 왼쪽에 대입

:input
:text
:password
:radio
:checkbox
:submit
:image
:button
:file
:enabled
:disabled
:checked
:selected

1. 폼 요소 찾기/ 타입과 속성 알아보기

$(document).ready(function(){
  var result ="";
  //폼 요소가 있는 만큼 반복하자.
  //alert($(":input").size());
  $(":input").each(function(index){
   result += "태그명 : " + $(this).get(0).tagName //this.tabName
   + ", type 속셩명 : " + $(this).attr("type") + "\n";
  })
  alert(result);
});

<input type="text" name="" /><br />
<input type="radio" name="" /><br />
<input type="password" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="image" name="" /><br />
<input type="reset" name="" /><br />
<input type="submit" name="" /><br />
<button>버튼</button>

2. 폼 속성값 복사 (배송지 정보를 복사할때등..)

.silver {background:#ccc;}

$(document).ready(function(){
  //모든 텍스트박스의 배경을 silver로 설정
  $(":text").addClass("silver");
  //첫번째 텍스트박스의 값을 두번째 텍스트박스로 복사
  $("#btnCopy").click(function(){
   $("#txtID").val($("#txtUserID").val());
  });
});

아이디 : <input type="text" name="" id="txtUserID" /><br />

'jQuery' 카테고리의 다른 글

웹접근성에 맞는 탭메뉴 (0)	2012.07.02
jQuery IE 버전에 Placeholder 적용하기 (0)	2012.06.26
각종 예제 사이트 (0)	2011.07.11
JQuery mobile (0)	2011.07.07
배경색(투명) 깔고 위에 레이어 팝업 띄우기 (0)	2011.06.27

:

좌충우돌 웹퍼블리셔 일기

'jQuery'에 해당되는 글 20건

jquery 플러그인

'jQuery' 카테고리의 다른 글

0527 duration

'jQuery' 카테고리의 다른 글

배너2

'jQuery' 카테고리의 다른 글

이미지 배너

'jQuery' 카테고리의 다른 글

div 안에 있는 엘리먼트 합 구하기

'jQuery' 카테고리의 다른 글

신현석님 Jquery AIP 정리

'jQuery' 카테고리의 다른 글

마우스오버 아웃

'jQuery' 카테고리의 다른 글

웹접근성에 맞는 탭메뉴

웹접근성에 맞는 탭메뉴

'jQuery' 카테고리의 다른 글

jQuery IE 버전에 Placeholder 적용하기

'jQuery' 카테고리의 다른 글

폼 요소 선택자

'jQuery' 카테고리의 다른 글

티스토리툴바