今日の人気記事

まだデータがありません。

指定した要素をぐるぐる回す「jQuery Rotate」

当ページのリンクには広告が含まれています。

スポンサーリンク

指定した要素をぐるぐる回すjQueryプラグイン「jQuery Rotate」を紹介します。

jQueryプラグイン「jQuery Rotate」

jQueryプラグイン「jQuery Rotate」は、divボックスや画像などなど……指定した要素をただただひたすらぐるぐる回すプラグインです。

スポンサーリンク

デモでは、divボックスと画像をぐるぐるぐるぐる回しています。ずーっとみていると目が回って、気持ち悪くなっちゃうので注意が必要です。

「jquery-rotate」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)