HOME

ABOUT

ARCHIVES

CONTACT

javascript

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;
}

JS

<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.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)