'jQuery'에 해당되는 글 15건

  1. 2011.03.22 jquery 예제모음
  2. 2011.02.22 베너 슬라이드&버튼이동
  3. 2011.02.22 [jquery]네임태그이동
  4. 2010.11.23 jquery를 이용한 온오프
  5. 2010.10.08 jquery 이미지 슬라이드
web standard/jquery2011. 3. 22. 12:43

jquery 예제모음

슬라이드베너
http://baijs.nl/tinycarousel/

이미지갤러리
1. http://galleria.aino.se/ (ie6지원안함)
2.

http://tympanus.net/codrops/

'web standard > jquery' 카테고리의 다른 글

이미지롤오버  (0) 2011.04.06
가로&세로 슬라이드  (0) 2011.04.04
베너 슬라이드&버튼이동  (0) 2011.02.22
[jquery]네임태그이동  (0) 2011.02.22
jquery를 이용한 온오프  (0) 2010.11.23
Posted by 수라
web standard/jquery2011. 2. 22. 13:28

베너 슬라이드&버튼이동

[HTML]
<div id="slides">
  <div class="slides_container">
    <div>
      <h1>Slide 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

[CSS]
<style type="text/css" media="screen">
  .slides_container {
    width:470px;
    height:170px;
  }
  .slides_container div {
    width:470px;
    height:170px;
    display:block;
  }
</style>

[SCRIPT]
<script>
  $(function(){
    $("#slides").slides();
  });
</script>


출처 : http://slidesjs.com/

'web standard > jquery' 카테고리의 다른 글

가로&세로 슬라이드  (0) 2011.04.04
jquery 예제모음  (0) 2011.03.22
[jquery]네임태그이동  (0) 2011.02.22
jquery를 이용한 온오프  (0) 2010.11.23
jquery 이미지 슬라이드  (0) 2010.10.08
Posted by 수라
web standard/jquery2011. 2. 22. 13:17

[jquery]네임태그이동

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script>
        function goToByScroll(id){
                 $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
        }
        </script>
    </head>
    <body>
    <ul>
        <li><a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a></li>
        <li><a href="javascript:void(0)" onClick="goToByScroll('2')">Go to anchor 2</a></li>
        <li><a href="javascript:void(0)" onClick="goToByScroll('3')">Go to anchor 3</a></li>
        <li><a href="javascript:void(0)" onClick="goToByScroll('4')">Go to anchor 4</a></li>
    </ul>
    <div style="width:600px">
        <div id="1">
            <h1>1</h1>
            내용1
        </div>
        <div id="2">
            <h1>2</h1>
            내용2
        </div>
        <div id="3">
            <h1>3</h1>
            내용3
        </div>
        <div id="4">
            <h1>4</h1>
            내용4
        </div>
    </div>
    </body>
</html>



출처 : http://djpate.com/portfolio/scrollTop/

'web standard > jquery' 카테고리의 다른 글

가로&세로 슬라이드  (0) 2011.04.04
jquery 예제모음  (0) 2011.03.22
베너 슬라이드&버튼이동  (0) 2011.02.22
jquery를 이용한 온오프  (0) 2010.11.23
jquery 이미지 슬라이드  (0) 2010.10.08
Posted by 수라
web standard/jquery2010. 11. 23. 14:30

jquery를 이용한 온오프

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function search_box(target){
if($("." + target).hasClass("none")){
    $("." + target).removeClass("none");
} else{
    $("." + target).addClass("none");
}
}
</script>
<style type="text/css">
.none {display:none; }
</style>


<div class="search_list">
    <ul>
        <li><a href="#"><span>테스트</span>1</a></li>
        <li><a href="#">테스트2</a></li>
        <li><a href="#">테스트3</a></li>
    </ul>
</div>
<p class="close"><a href="#" onclick="search_box('search_list'); return false;"><img src="../images/common/btn_close2.gif" alt="닫기"></a></p>

'web standard > jquery' 카테고리의 다른 글

가로&세로 슬라이드  (0) 2011.04.04
jquery 예제모음  (0) 2011.03.22
베너 슬라이드&버튼이동  (0) 2011.02.22
[jquery]네임태그이동  (0) 2011.02.22
jquery 이미지 슬라이드  (0) 2010.10.08
Posted by 수라
web standard/jquery2010. 10. 8. 15:01

jquery 이미지 슬라이드

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
/*
        rolling page by hong..
*/
var leftCt = 0;
    $(function(){
        $("#album").attr("top", "0");
        imgStart("R");
    });
    function imgStart(tp){
        clearInterval($("#imgList").attr("timer"));
        if(tp == "R"){ // 오른쪽 이동
            imgRight();
            $("#imgList").attr("timer", setInterval("imgRight()", 3000)); // 멈춰있는 시간
        }else{ // 왼쪽이동
            if(leftCt == 0){
                var leng = $("#imgList div").size();
                $("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
                $("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
                $("#imgList>div").eq(leng).remove();
                leftCt = 1;
            }
            imgLeft();
            $("#imgList").attr("timer", setInterval("imgLeft()", 3000));
        }
    }
    function imgRight(){
        $("#imgList").animate({
            left : parseInt($("#imgList div").eq(0).width() * -1)
        },300,function(){
            $("#imgList").css("left", "0px");
            $("#imgList>div").eq(0).clone().appendTo($("#imgList"));
            $("#imgList>div").eq(0).remove();
        });
    }
    function imgLeft(){
        var leng = $("#imgList div").size();
        $("#imgList").animate({
            left : 0
        },300,function(){
            $("#imgList").css("left", "0px");
            $("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
            $("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
            $("#imgList>div").eq(leng).remove();
        });
    }
</script>
<style>
/*
    이미지 사이즈 맞춰서 수정해주세요... (#viewArea)
*/
#viewArea {position:relative; width:108px; height:78px;overflow:hidden;}
#imgList {position:absolute; width:2000px; left:0px; top:0px;}
#imgList div {float:left; margin:0px; padding:0px;}
</style>
<div id="viewArea">
    <div id="imgList">
        <div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15306019099820072.jpeg'></div>
        <div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15302571111964072.jpg'></div>
        <div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15304347571481072.jpeg'></div>
    </div>
</div>
<div>
    <span onClick="imgStart('L')"><</span>&nbsp&nbsp<span onClick="imgStart('R')">></span>
</div>

'web standard > jquery' 카테고리의 다른 글

가로&세로 슬라이드  (0) 2011.04.04
jquery 예제모음  (0) 2011.03.22
베너 슬라이드&버튼이동  (0) 2011.02.22
[jquery]네임태그이동  (0) 2011.02.22
jquery를 이용한 온오프  (0) 2010.11.23
Posted by 수라

티스토리툴바