jQuery

【jQuery】マウスを動かす時に輝く星が現れるプラグインjQuery Stars

February 17, 2018
jQuery Stars

jQuery Starsはあなたのサイトにマジックを追加するjQueryプラグインです。マジックはマウスを動かす時に輝く星が現れます。サイトの任意のブロック要素に追加することも、すべてのサイトに追加することもできます。

Usage

ページの下部にjQueryとスクリプトを含めます

...

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="path/to/scripts/jquery-stars.js"></script>

ページやスクリプトファイルにjavascriptコードを追加する

jQuery('#selector').jstars({
	image_path: 'images', // folder with magic image
	style: 'white',       // optional, color, default: white
	frequency: 12         // optional, from 1 to 19
});

Plugin options

オプションの全リスト

jQuery('#example-rand').jstars({
	image_path: '', // this is requried option
	image: 'jstar-map.png', // this is requried option
	style: 'white',
	frequency: 12,
	// if you check the sprite image you will see it has
	// several rows of different colors
	// style map sets the coordinates of each row
	style_map: { 
		white: 0,
		blue: -27,
		green: -54,
		red: -81,
		yellow: -108
	},
	width: 27, // single star width
	height: 27, // single star height
	delay: 300 // rotate speed
});