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

【问题标题】：Jquery, Django, picture enlarge on click or hoverJquery，Django，点击或悬停图片放大
【发布时间】：2012-03-10 16:46:07
【问题描述】：

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

点击图片或将鼠标悬停在图片上（以更容易者为准）我想将图片放大到原始大小。再次点击时，我想让它变小（或者如果我在悬停，当鼠标移动时它应该回到小尺寸）。

这是我在模板中的内容：

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

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

有什么想法吗？

【问题讨论】：

标签： jquery django django-templates jquery-click-event

【解决方案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/

【讨论】：