Question

我正在为我的网站制作一个自定义投资组合库，我遇到了问题。

我希望在您点击缩略图时让图库向上滑动，但不要立即将所有图像放在页面上。页面设置如下：

  [  main img   ]
(hidden placeholder)
  [1][2][3][4][5]

代码应该像这样工作：

点击拇指获取SRC属性
将<img src="original+_lg.jpg" />放在(hidden placeholder)（<div id="placeholder">）
从500px减去margin-top以使用CSS3

我自己尝试编写脚本，但是我对jQuery很糟糕，而且结果并不好。我设法改变了margin-top，但只是手动，而不是循环，这将是理想的。

我的代码是：

$(document).ready(function() {
$("#thumb").click(function() {
    $("#mask").css({
        "margin-top":"-500px"
    });
    $('img#placeholder').attr('src',function(i,e){
        return e.replace("slides/thumb_lg.jpg");
    })
});

}）;

正如您所看到的那样，它确实不起作用。

我非常失望，我无法理解这一点，因为我设法为主页实际编写了jQuery（http://beta.jacobbearce.com/）

我真的很感激帮助。谢谢！

编辑：稍微澄清一下：

这个脚本非常适合获取您点击的拇指的SRC属性，删除最后四个字符（以摆脱.jpg），然后添加_lg.jpg以显示正确的，大图像，将新<img src="original+_lg.jpg">放在占位符div上方，然后从margin-top中减去500px，使其向上滑动以显示新图像。我知道，有点复杂，但这对我正在做的事情来说是最好的。

Answer 1

您可以使用.before()在隐藏占位符之前将新图像插入DOM：

$('#placeholder').before( '<img src="original+_lg.jpg" />' );

然后根据需要调整保证金。

使用jQuery在ID上面放置一些东西

1 个答案: