jQuery基礎講座：任意のid属性を使ったクリックアクション

jQuery基礎講座

忘備録もかねて随時更新していきます。

まず最初に、クリックアクションでclass属性を付与し、アクションを起こさせる指示の基本形を。
まずはサンプルをどうぞ

click here

非常にシンプルな設計ですが、作り方を見ていきましょう。

クリックアクションの実装方法

まずは上記の実装方法を記載していきましょう。

HTML

<div class="wrapper">

 <div id="wrapper-circle">

  <p>click here</p>

 </div>

</div>

CSS

.wrapper {

width:100%;

height:450px;

position:relative;

background:#455765;

}

#wrapper-circle {

position:absolute;

width:200px;

height:200px;

top:50%;

left:50%;

transform:translate(-50%,-50%) rotate(-180deg);

-webkit-transform:translate(-50%,-50%) rotate(0deg);

transition:linear .5s;

-webkit-transition:all linear .5s;

background:#ffc800;

cursor: pointer;

}

#wrapper-circle p {

color:#fff;

font-weight:900;

opacity:1;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

#wrapper-circle.action {

width:300px;

height:300px;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%) rotate(720deg);

-webkit-transform:translate(-50%,-50%) rotate(720deg);

border-radius:50%;

border:solid 10px #ebd842;

background: url('../images/sample.png') repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

#wrapper-circle.action p {

color:#fff;

opacity:0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(function(){

    $('#wrapper-circle').click(function(){

        $(this).toggleClass('action');

    });

});

</script>

jQueryのtoggleClassは、クリックでclass要素の付け外しが可能な指示です。ナビゲーションやモーダルウィンドウなど、応用次第で多岐に渡った活用例がありますので、是非色々とお試しくださいね！

Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)