Question

我将图像作为文件存储在django数据库中。在模板中，如果从下拉框中选择某个选项，则该选项的存储图片将以小尺寸显示..这都是使用jquery完成的。

点击图片或将鼠标悬停在图片上（以较简单的方式）我想将图片放大到原始尺寸。再次点击我想让它变小（或者如果我在徘徊，当鼠标移动它应该回到小尺寸）。

以下是我在模板中的内容：

    <script type = "text/javascript">
            $(function ()
            {
                    $("#image{{p.option}}").on('click', function ()
                    {
                            $(this).width(1000);
                    });
            });
    </script>

不幸的是，这根本没有做任何事情......

有什么想法吗？

Answer 1

不确定从哪里获取原始尺寸的数据，但这是一种调整图像大小的方法，

var hoverSize = [100, 400];

$('img').hover(function() {
    $(this).css({
        height: hoverSize[0],
        width: hoverSize[1]
    });
}, function() {
    $(this).css({
        height: "",
        width: ""
    });
});

继承人演示http://jsfiddle.net/TSF46/

This显示你在你的js中使用上下文变量，这看起来你已经知道了。

修改：您可以将.hover(...)替换为.toggle(...)，请参阅http://jsfiddle.net/TSF46/1/

Jquery，Django，图片放大点击或悬停

1 个答案: