Question

我需要有关jquery代码的帮助。

在我的网站上，我有一个标题。当我向下移动到网站时，这个标题是“粘性的”。就像这里：http://markgoodyear.com/labs/headhesive/

var options = { 
    offset: '#showHere', 
    classes: { 
        clone: 'banner--clone', 
        stick: 'banner--stick', 
        unstick: 'banner--unstick' 
    } 
}; 
var banner = new Headhesive('.banner', options);

请查看我的代码：

<header id="intro-header" class="banner banner--clone">
  <div id="container">
  <div id="content">
  <div class="logo">
<img class="main-logo" alt="" src="images/logo.png">

现在我的标题位于顶部。

当我进入我的网站时，我得到了新课程：

<header id="intro-header" class="banner banner--clone banner--stick">
  <div id="container">
  <div id="content">
  <div class="logo">
<img class="main-logo" alt="" src="images/logo.png">

我的问题是：在添加新课程后，当我将网站移至关闭状态时，如何将图像“LOGO.PNG”更改为“LOGO-CLONE.PNG”？

请为我写短代码:) 谢谢！

Answer 1

您可以使用jquery

这样做

$(function(){
   $(window).scroll(function(){
       //Check for class 
       if( $("#intro-header").hasClass( "banner--stick") ) {
           $("#intro-header.banner.banner--stick")
             .find('img.main-logo')
             .attr('src', 'images/LOGO-CLONE.PNG'); 
         } else {
          //Show old logo
           $("#intro-header.banner")
             .find('img.main-logo')
             .attr('src', 'images/LOGO.PNG');
       }
   })
});

修改

现在，由于您已添加了js代码，因此可以使用此方法

var options = { 
  offset: '#showHere', 
  classes: { 
    clone: 'banner--clone', 
    stick: 'banner--stick', 
    unstick: 'banner--unstick' 
  }, 
  onStick: function() {
    //Check for class 
     $("#intro-header.banner.banner--stick")
            .find('img.main-logo')
            .attr('src', 'images/LOGO-CLONE.PNG'); 

  },
  onUnstick: function() {
     //Show old logo
     $("#intro-header.banner")
           .find('img.main-logo')
           .attr('src', 'images/LOGO.PNG');

   }
};

用jquery更改图像

1 个答案: