jQuery

【jQuery】divのセットを積み重ねたバナーを作成するfsBanner

September 14, 2018
fsBanner

fsBannerはdivのセットを積み重ねたバナーを作成するjQueryプラグインです。

Usage

JavaScriptファイルとCSSファイルをインクルード。

<!-- Jquery 2.1.4 from CDN, or from wherever you want to load it -->
<script type="text/javascript" src='https://code.jquery.com/jquery-2.1.4.min.js'></script>

<!-- fsBanner (from wherever you copied/pasted it) -->
<link rel="stylesheet" type="text/css" href="fsbanner/fsbanner.css">
<script type="text/javascript" src="fsbanner/fsbanner.js"></script>

Html

divをセット。

<!--list of banners to be stacked -->
<div class='fsbanner'>
	<!-- first banner -->
	<div style='background-image:url(images/black.jpg)' /><span class='name'>BLACK</span></div>
	<!-- second banner -->
	<div style='background-image:url(images/brown.jpg)' /><span class='name'>BROWN</span></div>
</div>

Javascript

// the div must have the fsbanner class for styling, 
// but you can use any selector that would match the div here.
$('.fsbanner').fsBanner(options);