JS / jQuery交换图像滚动事件 [英] JS/jQuery swap image on scroll event
本文介绍了JS / jQuery交换图像滚动事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个网站菜单,其工作方式大致如下: http://jsfiddle.net/sinky / XYGRW / (发现这里stackoverflow)
I've got a site menu that works pretty much like this: http://jsfiddle.net/sinky/XYGRW/ (found that here on stackoverflow)
我的问题是,设计师想要在nav(主页按钮)的标志,切换到一个较小的图标。不只是缩小,而是实际改变形象。我可以使用已经用于其他addClass命令的滚动事件来更改img src吗?
My question is that the designer wants the logo in the nav (home button), to be switch to a smaller icon. Not just scale down, but actually change image. Can I use the scroll event I'm already using for the other addClass commands to change the 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');
}
});
ref: http://api.jquery.com/attr/
这篇关于JS / jQuery交换图像滚动事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文