0

我正在显示和隐藏一个包含文本的 div，以便能够看到后面的背景图像。在让我的 div 稍微移动并保持我的 div 在侧面可见方面，我得到了很大的帮助

$("#welcome").toggle(
   function() {
    var left = $(this).outerWidth() - 10 + "px";

    $(this).animate({ "margin-left": "+=" + left }, 500);
  $(this).onClick() },
   function() {
    var left = $(this).outerWidth() - 10 + "px";

    $(this).animate({ "margin-left": "-=" + left }, 500);
   }
 );

现在我希望我在 html 中的图像更改形式隐藏以显示...

<div id="welcomepicture"> 
<div id="welcome">
 Welcome  some really meaningful text here!

  <p class="arrowfull"><a href="#"> <img class="img-swap"  src="http://housing.ucsc.edu/guide/css/images/hide_off.png" alt="Click to view full image" title="Click to view full image" height="42" width="17"> </a></p>

我不确定是否在 javascript 中放置 .onClick 图像交换？还是我写一个新的var？jquery 和 javascript 新手，感谢您的帮助

http://jsfiddle.net/BeccaAlley/UfsS8/4/

4

2 回答 2

0

您可以在切换功能中更改图像的来源。最好的方法是将你的表演和你的隐藏放在一个图像中，并使用背景位置在它们之间移动。这样，您将只加载 1 个图像而不是 2 个。

$("#welcome").toggle(
    function() {
        var left = $(this).outerWidth() - 10 + "px";

        $(this).animate({ "margin-left": "+=" + left }, 500);
        $('.img-swap').attr('src','show.jpg');
    },
    function() {
        var left = $(this).outerWidth() - 10 + "px";

        $(this).animate({ "margin-left": "-=" + left }, 500);
        $('.img-swap').attr('src','hide.jpg');
    }
);
于 2012-12-10T19:46:39.367 回答
0

如果您希望在单击“单击查看完整图像”时显示图像，您可以将以下代码添加到 js 文件的底部：

$('.img-swap').click(function(){
    $('#imageID').show();
});

在此代码中，您可以将 #imageID 更改为您要显示的图像的 id 的 id。如果您使用类来引用图像而不是 id，那么您当然会使用“。” 代替 '＃'。让我知道这是否有帮助，或者您是否正在寻找一些不同的东西。

于 2012-12-10T19:29:31.110 回答