[JS]CSSスプライトにフェードや移動、不透明度の変更を加えるスクリプト -bgFade

Post on:2010年7月6日

スクリプトの実装

HTML

class名は自由に設定できます。

<textarea name="code" class="html" cols="60" rows="5">
<div class="myButton">
   Any text content you want here
</div> 
</textarea>

Any text content you want here

</div>

</textarea>

CSS

変更後のスタイルのclass名には「span.bg_fade」を含めます。また、display, height, widthは必ず指定します。

<textarea name="code" class="css" cols="60" rows="5">
.myButton {
   position:relative;
   height: 75px;
   width: 500px;
   cursor:pointer;
   display:block;
   background: url('button.png') no-repeat top left;
}

.myButton span.bg_fade {
   position: absolute;
   display:none;
   top: 0;
   left: 0;
   height: 75px;
   width: 500px;
   background:url('button.png') no-repeat 0px -75px;
} 
</textarea>

.myButton {

position:relative;

height: 75px;

width: 500px;

cursor:pointer;

display:block;

background: url('button.png') no-repeat top left;

}

.myButton span.bg_fade {

position: absolute;

display:none;

top: 0;

left: 0;

height: 75px;

width: 500px;

background:url('button.png') no-repeat 0px -75px;

}

</textarea>

JavaScript

オプションでフェードのスピード、移動量、不透明度などを設定できます。

<textarea name="code" class="html" cols="60" rows="5">
$('.myButton').hover(function(){
      $(this).bgFade('fadeIn');
}, function() {
      $(this).bgFade('fadeOut');
}); 
</textarea>