0

ステーション情報と再生ボタンを表示するホバー付きの約 24 の大きなカバー画像があります。ユーザーが再生ボタンをクリックすると、「プレーヤー」は、ユーザーがクリックしたものと一致するように情報を変更します。

現在、「プレーヤー」のカバーの小さい画像があり、大きいバージョンと一致するように変更されていません。

プレーヤーの小さなカバー画像も、ユーザーが再生をクリックしたときにステーション名やステーション情報と同じように変化して、大きな画像と一致するようにしたい

これが私がこれまでに持っているスクリプトです。スクリプトのカバー画像の変更はまだありません。これは、小さな画像をリンクする方法を見つけようとしているものです。現在、css でリンクされているのは 1 つだけで、他に約 23 個あるためです。

$(function(){
var station = $('.player-station'),
    record = $('.record2:first'),
    playBtns = $('.play'),
    info = $('.nprecinfo');

playBtns.click(function()
{
    var btn = $(this);
    if(btn.text() == 'STOP')
    {
        btn.text('PLAY');
        record.css({'-webkit-animation-play-state': 'paused',
                    '-moz-animation-play-state': 'paused'});
        return;
    }

    playBtns.text('PLAY');
    var album = btn.closest('.album');
    station.text(album.find('h3').text());
    info.text(album.find('.recordinfo').text());
    record.css({'-webkit-animation-play-state': 'running',
                '-moz-animation-play-state': 'running'});
    btn.text('STOP');
});
});

これは、小さなカバー画像を含む html コードです。< div id="lrvinyl"> 内に表示されます

<div id="player">
            <div id="recordbox">
            <div class="record2">
            </div>
            </div>
            <div class="player-box">
            <div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
 <p class="nprecinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
</div>
<div class="bars-box">
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
                    </div>
<div id="lrvinyl">
                    </div>
                </div>
              </div>
            </div>
<div class="grid_3">
    <div class="album">
    <div class="record">
    </div>

ここにフィドルがありますhttp://jsfiddle.net/7txt3/15/

4

2 に答える 2

1

rel="path_to_album_image"各再生ボタンに追加します。次に、スクリプトを追加します。

$('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");

したがって、再生ボタンを押すと、小さな画像が再生ボタンrel=""属性で定義された画像に変わります。 デモ

于 2012-10-13T18:22:12.070 に答える
0

#lrvinyl次のように、divの背景画像を新しい画像に変更するだけです。

$('#lrvinyl').css({'background-image':'url(http://benlevywebdesign.com/somafm/images/lush.png)'});

実際のデモを見る

更新:
これは、以前のコードのようにハードコーディングせずに、画像を動的に変更するコードです。確認してください:

var im = $(this).parent().next('div').css('background-image');
$('#lrvinyl').css({'background-image':im});

ライブデモを見る

于 2012-10-13T18:16:35.087 に答える