指定した要素をぐるぐる回す「jQuery Rotate」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した要素をぐるぐる回すjQueryプラグイン「jQuery Rotate」を紹介します。
jQueryプラグイン「jQuery Rotate」
jQueryプラグイン「jQuery Rotate」は、divボックスや画像などなど……指定した要素をただただひたすらぐるぐる回すプラグインです。
スポンサーリンク
デモでは、divボックスと画像をぐるぐるぐるぐる回しています。ずーっとみていると目が回って、気持ち悪くなっちゃうので注意が必要です。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="jQuery Rotateのデモでーす。">
<title>jQuery Rotate - jQuery Plugin Demo</title>
<style>
div {
margin: 0 200px;
width:300px;
height:300px;
font-size: 40px;
}
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<h1>jQuery Rotateのデモでーす。</h1>
<img src="circle.png"/>
<div>
<p>目がまわる……</p>
<p>オエー</p>
</div>
<script src="//code.jquery.com/jquery-2.0.3.js"></script>
<script src="jquery.rotate.js"></script>
<script>
$(function() {
var img = $('div,img');
function rotate() {
img.animate({rotate: '360'}, 2000, 'linear', function() {
rotate();
});
}
rotate();
});
</script>
</body>
</html>
スポンサーリンク