JS/jQuery 在滚动事件上交换图像

JS/jQuery swap image on scroll event

本文关键字：交换 图像 事件 滚动 jQuery JS      更新时间：2023-09-26

我有一个网站菜单，工作原理是这样的：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">

当然：

$(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');
    }
});

参考： http://api.jquery.com/attr/

为什么不直接将图像添加到您的 css 中？

.header.tiny {
    height:40px;
    background: url(...);
}

您已有的其余代码

在jsfiddle

相关文章：