在JavaScript事件上更改图像大小

Question

我使用的是我使用JavaScript离线购买的模板。我对JavaScript并不是很了不起，我想做到这一点，一旦用户点击上面的一个链接，徽标就会从小到大：

在：

在：

正如我之前所说的，我不擅长JavaScript，我相当擅长HTML和CSS，但在高级CSS上略显灰色。有没有办法在页面更改时执行此操作。这个代码是一个单页，不会从服务器重新加载，所以我无法通过“页面加载”设置事件。加载是通过JavaScript完成的。要进行现场演示，您可以访问：Logo Change Site

Answer 1

将徽标<img />设为id，例如：

<img id="siteLogo" src="images/logo.png" alt="" height="200">

添加<script>标记，例如：

<script type="text/javascript">
    var img = document.getElementById("siteLogo");
    img.addEventListener('click', function () {
        if (img.height != 200) {
            img.height = 200;
        } else {
            img.height = -1;
        }
    });
</script>

以上操作会导致徽标在点击时在大小之间切换。

然后你必须使用<header>到而不是来固定高度;当徽标改变大小时，这会使其重新调整大小。

Answer 2

您可以使用一些jquery来更改图像的属性。这可以通过一些ajax完成：

jquery(function () {

    $("#your image id").click(function () {

        //Then you can change the style properties of your image, this is how you can do it.

        $("#image id you want to modify").attr("style","...");

        //the ... in the ", this is there you will edit your style.

    });

});

所以这是你可以做你想做的事情的方式，但你必须知道如果你想使用jquery你必须链接一个jquery librairie。有关于jquery的文档。

编辑：您还可以做的是创建一个外部js文件，您可以调用ajax.0-1.js或其他任何内容，然后将此文件链接到您的html页面。

Answer 3

我看到你在页面上加载jQuery，这很好，因为它使这个任务变得简单;）

在</body>

之前

<script type="text/javascript">
    $(document).ready(function(){
        $('.navigation li').on('click', function(){
                $('#img-logo').css('width','212px');
                $('#img-logo').css('height','70px');
        });
    });
</script>

然后改变你的html：

<img src="http://yakko.cs.wmich.edu/~brain/SAS/images/logo.png" alt="logo"  id="img-logo"/>

你可以在这里找到jsfiddle：
http://jsfiddle.net/arqjn/

你可以根据需要在css-transition上添加一些效果
确保使用好的图像（在普通视图中使用双倍尺寸）或者在变焦时看到模糊