まだデータがありません。
指定した要素をぐるぐる回す「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> |
スポンサーリンク