0

次の質問に答えるための助けを得るために、私はたくさん検索しました：

リンクの上にカーソルを置いたときに、jquery を使用して div の画像背景の位置を変更したいと考えています。mouseOut では、現在の位置を保持する必要があります。

ユースケース: http://jsfiddle.net/c9wN9/1/

4 つの異なる「状態」を持つスプライト イメージがあります。ページの読み込み時に、画像の状態 1 (位置 0 0) が表示されます。

4 つの異なるリンク (位置 0 0 / 0 100 / 0 200 / 0 300) にカーソルを合わせると、それに応じて background-position が変更され、mouseOut の現在の位置が維持されます。

さらに、fadeIn/fadeOut によって画像の変化をアニメーション化し、現在のアクティブな位置をリンク上に表示することができます。(? のアクティブなクラス<a>)

HTML 構造:

<div id="background"></div>
<a id="link1" href="#">State 1</a>
<a id="link2"href="#">State 2</a>
<a id="link3"href="#">State 3</a>
<a id="link4"href="#">State 4</a>

CSS

#background {
height: 100px;
width: 100px;
}

jQuery

?

私は基本的な jsfiddle を作成し、jQuery のサポートを期待しています: http://jsfiddle.net/c9wN9/1/

事前にどうもありがとうございました、

フランク

4

1 に答える 1

0

私はアニメーションを含めませんでしたが、これはあなたが探しているものを正確に実行するはずです.

<style>
#background {
height: 100px;
width: 100px;
background-img:('foo.png')}
#background.hover1{background-position:0px 0px} 
#background.hover2{background-position:0px 100px}
#background.hover3{background-position:0px 200px}
#background.hover4{background-position:0px 300px}
</style>

<div id="background"></div>
<a id="hover1" class="trigger" href="#">State 1</a>
<a id="hover2" class="trigger" href="#">State 2</a>
<a id="hover3" class="trigger" href="#">State 3</a>
<a id="hover4" class="trigger" href="#">State 4</a>

<script>
$(".trigger").hover(function (){
// get hover class
var hoverClass = $(this).attr('id');
// remove active class from any trigger link
$(".trigger").removeClass('active');
// add active class to current trigger link
$(this).addClass('active');
// add hover class to the background div to shift the background position
$("#background").removeClass().addClass(hoverClass);
});
</script>
于 2013-05-01T20:42:16.023 に答える