Question

我正在创建一个展示应用的网站，并希望允许用户点击iPhone模型来查看该应用的各种功能。

我有一个iPhone覆盖图，作为背景图像（.iphone）和屏幕抓取，也可以作为背景图像（。屏幕）显示在页面上，但希望用户能够决定什么通过单击特定按钮显示screengrab。

我自己并不熟悉JQuery，但有人告诉我这可能是一个解决方案。我怎么做到这一点？我的代码是......

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

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

非常感谢任何帮助。

编辑：我找到了类似的例子。这是... link。点击缩略图，它会显示在iPhone上。

Answer 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>

Answer 2

我可能会按如下方式进行设置：

<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>

Answer 3

$('li').click(function(){
   $('div').css("background-image", "image/url/here.ext");
)};

Answer 4

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

<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。

Answer 5

我建议使用单个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>

根据LI点击更改DIV的背景图像

5 个答案: