我有一个网站菜单,其工作原理与此类似:http://jsfiddle.net/sinky/XYGRW/(在 stackoverflow 上发现)
我的问题是,设计师希望将导航(主页按钮)中的徽标切换为较小的图标。不仅仅是缩小尺寸,而且实际上改变了图像。我可以使用其他 addClass 命令已经使用的滚动事件来更改 img src 吗?
$(window).scroll(function () {
if ($(document).scrollTop() == 0) {
$('#header').removeClass('tiny');
$('#menu-spacing').addClass('nav-margin-top');
} else {
$('#header').addClass('tiny');
$('#menu-spacing').removeClass('nav-margin-top')
}
});
HTML
<div id="header" class="header fixed">
<div class="contain-to-grid">
<nav class="row top-bar">
<ul class="title-area">
<li><img src="img/resolute_logo.png" width="195" height="103" alt=""/> </li>
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<div id="menu-spacing" class="hide-for-medium-down nav-margin-top">
Sure:
$(window).scroll(function () {
if ($(document).scrollTop() == 0) {
$('#header').removeClass('tiny');
$('#menu-spacing').addClass('nav-margin-top');
$('.title-area img').attr('src', 'img/resolute_logo.png');
} else {
$('#header').addClass('tiny');
$('#menu-spacing').removeClass('nav-margin-top');
$('.title-area img').attr('src', 'your-new-image.png');
}
});
ref: http://api.jquery.com/attr/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)