0

我正在使用我离线购买的使用 JavaScript 的模板。我对 JavaScript 不是很好，我想做到这一点，以便用户点击上面示例中的一个链接后，徽标就会从小变大：

前： 前

后： 后

正如我之前所说，我不擅长 JavaScript，我在 HTML 和 CSS 方面相当擅长，但在高级 CSS 方面还是有点灰心。有没有办法可以在页面更改时做到这一点。代码都是一个页面，不会从服务器重新加载，所以我不能通过“页面加载”设置事件。加载是通过 JavaScript 完成的。对于现场演示，您可以访问此处：徽标更改站点

4

3 回答 3

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>然后，您将不得不玩弄没有固定的高度；这将使其在徽标更改大小时调整大小。

于 2013-05-06T19:53:19.203 回答
1

您可以使用一些 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 库。有关于jquery的文档。

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

于 2013-05-06T19:56:08.180 回答
1

我看到您在页面上加载了 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 上添加一些效果， 否则您会在缩放时看到模糊

于 2013-05-06T20:02:58.443 回答