更改JavaScript事件的图片大小 [英] Change image size on JavaScript event

问题描述

我正在使用我使用JavaScript离线购买的模板。我对JavaScript并不擅长，我想这样做是为了让用户点击上面例子中的一个链接后，标识从小变大。

之前：

After：

我之前说我对JavaScript不擅长，我对HTML和CSS很擅长，但在高级CSS上略显灰暗。有没有一种方法可以在换页上做到这一点。这个代码全部都是单个页面，并且不会从服务器重新加载，所以我无法通过页面加载设置事件。加载是通过JavaScript完成的。对于现场演示，您可以到这里：徽标更改网站

解决方案

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

就在< / body>

 之前< script type =text / javascript> （'click'，function（）{
 $（'＃img-logo'）。
 $（document）.ready（function（）{
 $（'。navigation li'）。 ）.css（'width'，'212px'）; 
 $（'＃img-logo'）。css（'height'，'70px'）; 
}）; 
} ）; 
< / script> 
  

然后更改您的html：

 < img src =http://yakko.cs.wmich.edu/~brain/SAS/images/logo.pngalt =logoid =img-logo/ > 
  

你可以在这里找到jsfiddle：

http://jsfiddle.net/arqjn/

你可以添加一些如果你想要

确保使用一个好的图像（在普通视图中是双倍大小），否则你会看到模糊缩放。

I am using a template that I bought offline that uses JavaScript. I am not that great with JavaScript and I would like to make it so that the logo goes from being small to larger as soon as the user clicks on one of the links above example:

Before:

After:

As I said before I am not good at JavaScript, I am fairly good at HTML and CSS, but stil a little grey on advanced CSS. Is there a way I can do this on page change. The code for this is all one single page and does not reload from server so I can't set an event via "page load". The loading is done via JavaScript. For a live demo you can go here: Logo Change Site

解决方案

I see you load jQuery on your page, that's good because it makes this task simple ;)

just before </body>

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

then change your html:

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

you can find jsfiddle here:
http://jsfiddle.net/arqjn/

you can add some effects on css-transition if u want
make sure to use a good image (double-sized on normal view) or you will see blur on zoom

这篇关于更改JavaScript事件的图片大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！