更改JavaScript事件的图片大小

本文介绍了更改JavaScript事件的图片大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在使用我使用JavaScript离线购买的模板。我对JavaScript并不擅长，我想这样做是为了让用户点击上面例子中的一个链接后，标识从小变大。 之前： After： 我之前说我对JavaScript不擅长，我对HTML和CSS很擅长，但在高级CSS上略显灰暗。有没有一种方法可以在换页上做到这一点。这个代码全部都是单个页面，并且不会从服务器重新加载，所以我无法通过页面加载设置事件。加载是通过JavaScript完成的。对于现场演示，您可以到这里：徽标更改网站 解决方案 我看到你在页面上加载jQuery，这很好，因为它使得这个任务变得简单;） 就在< / body> 之前 $（'＃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事件的图片大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！