0

我正在创建一个网站来展示应用程序，并希望允许用户单击 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

从语义上讲，您的标记应如下所示：

<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 click 处理程序，它可以为每个设置所需的图像背景：

<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 回答
0 
$('li').click(function(){
   $('div').css("background-image", "image/url/here.ext");
)};
于 2012-06-01T18:55:06.987 回答