0

アプリを紹介する Web サイトを作成しており、ユーザーが iPhone モックアップをクリックしてアプリのさまざまな機能を表示できるようにしたいと考えています。

ページに背景画像 (.iphone) として格納された iPhone オーバーレイと、同じく背景画像 (.screen) として格納されたスクリーン グラブがありますが、どのスクリーン グラブが表示されるかをユーザーが指定できるようにしたいと考えています。特定のボタンをクリックすることによって。

私自身は JQuery に詳しくありませんが、これが解決策になる可能性があると言われています。どうすればこれを達成できますか？私のコードは...

<div class="iphone"></div>
<div class="screen"></div>

<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>

どんな助けでも大歓迎です。

編集:似たような例を見つけました。ここにあります...リンク。サムネイルをクリックすると、iPhone に表示されます。

4

5 に答える 5

1

おそらく次のように設定します。

<div class="fullsize">
  <div class="iphone"></div>
  <div class="screen"></div>
<div>

<ul class="screenshots">
  <li class="iphone" id="scr1">Screen 1</li>
  <li class="screen" id="scr2">Screen 2</li>
</ul>
<script>
$('.screenshots li').click(function() {
  $('.fullsize div').hasClass($(this).attr('class')).css('background-image', 'imgurl'));
});
</script>
于 2012-06-01T18:58:37.050 に答える
1 
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots"><a href="#" id="scr1">Screen 1</a></li>
<li class="screenshots"><a href="#" id="scr2">Screen 2</a></li>
</ul>
<script>
$('.screenshots a').click(function(){
    switch($(this).attr('id')){
        case 'src1':
            $('.iphone').css('background-image','url("image1.png")');
        break;
        case 'src2':
            $('.iphone').css('background-image','url("image2.png")');
        break;
    }
});
</script>
于 2012-06-01T18:54:37.217 に答える
0 
$('li').click(function(){
   $('div').css("background-image", "image/url/here.ext");
)};
于 2012-06-01T18:55:06.987 に答える
0

意味的に言えば、マークアップは次のようになります。

<div class="screenshot" id="iphone"></div>
<div class="screenshot" id="screen"></div>

<ul id="screenshot-nav">
<li><a href="#iphone">Screen 1</a></li>
<li><a href="#screen">Screen 2</a></li>
</ul>

にクリック イベントを追加する代わりに、実際のリンクを使用する方が適切liです。さらに、このようにすると、JavaScript がなくても機能を動作させることができます。少なくとも、ユーザーは正しいスクリーンショットに「ジャンプ」するだけです。

これで、次の jQuery が機能するはずです。

$('#screenshot-nav a').click(function(){
    $('.screenshot').hide();
    $($(this).attr('href')).show();
});

ただし、これは iPhone 用に作成しているため、代わりに jQuery Mobile を検討する必要があります。特にtouch、click.

于 2012-06-01T18:57:21.383 に答える
0

それぞれに目的の画像の背景を設定できる単一の jQuery クリック ハンドラーをお勧めします。

<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots" data-backgroundurl="url1.jpg">Screen 1</li>
<li class="screenshots" data-backgroundurl="url2.jpg">Screen 2</li>
</ul>
<script>
$('.screenshots').click(function(){
    $('.screen').css('background-image', $(this).data("backgroundurl"));
});
</script>
于 2012-06-01T18:57:42.817 に答える