如何使用jQuery更改背景图片“点击”？

我想为背景制作动画效果，它应该听取点击时会改变图像的事件。例如，我点击Sajo Hapyo它应该改变背景图片。主要问题是，所有的图像将有不同的背景图像，我真的坚持这一点。如何使用jQuery更改背景图片“点击”？

我在我的JS中使用了backgroundColor: green进行测试，因为想检查它是否有效。

在最终版本中，背景图片将被添加，并且它应该会在点击时发生变化，并带有很好的jQuery UI（效果）。

下面是截图

请帮我

这里是我的代码

HTML

<section id="main-showcase"> 
    <div class="showcase-wrapper"> 
     <div class="left-main col-lg-3 col-md-3"> 
      <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div> 
      <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div> 
      <div class="shadow-effect"><p class="natura">Natura Bogata</p></div> 
      <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div> 
      <div class="shadow-effect"><p class="dongush">Dongsuh</p></div> 
      <div class="shadow-effect"><p class="may">ООО Май</p></div> 
     </div> 
     <div class="right-main col-lg-9 col-md-9"> 
      <div class="inner-container"> 
       <h1>Ottogi</h1> 
       <h2>Южно - Корейские продукты питания высочайшего качества!</h2> 
      </div> 
      <div class="box-container"> 
       <div class="main-wrap"> 
        <div id="main-slider" class="first-slider"> 
         [[getImageList? 
          &tvname=`goods` 
          &tpl=`goodsSlider.tpl` 
         ]] 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section>

$('button.sajo').click(function() { 
    $('.right-main').animate({ 
     backgroundColor: 'green', 
    }, 1500); 
});

来源

2017-07-26 N. Jehnsen M

请更清楚。究竟是什么不工作，你的预期结果是什么？ – Utkanos

它会触发点击功能吗？在函数中插入一个警报来验证它。 – Doomenik

其实不是使用jQuery.animate的（）。你可以简单地在同一个元素上切换一个类。避免使用animate（）和使用css3动画是一种好习惯。

codepen

这里检查codepen样品。它会解释如何使用它。而不是使用关键帧和全部。你可以简单地使用trnasition获取它。

span { 
    background-color: red; 
    padding: 10px; 
    transition: all 1.5s ease; 
    color: white; 
} 
.change-color { 
    background-color: blue; 
}

来源

2017-07-26 10:02:03 Abinthaha

.bgcolor{ 
    animation: colorchange 50s; /* animation-name followed by duration in seconds */ 
    /* you could also use milliseconds (ms) or something like 2.5s */ 
    -webkit-animation: colorchange 50s; /* Chrome and Safari */ 
} 

@keyframes colorchange 
{ 
    100% {background: green;} 
} 

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */ 
{ 
    100% {background: green;} 
}`

那么这个类添加到要更改的背景元素：

$('button.sajo').click(function() { 
    $('.right-main').addClass('bgcolor'); 
});

来源

2017-07-26 09:52:25

首先，我不能在HTML看到您应用点击事件侦听器的按钮。不过，我认为这个按钮位于HTML代码的某个位置，您想要做的是通过单击它来更改主滑块上的背景图像。要做到这一点，你只需要做到以下几点：

$('button.sajo').click(function() { 
    $('.right-main').animate({opacity: 0}, 'slow', function() { 
     $(this) 
     .css({'background-image': 'url(your_url)'}) //Change url to your image url 
     .animate({opacity: 1}); 
    } 
});

注意，因为你没有指定你想要的确切的动画，我只是提供了动画淡入不透明度地方从0到1个例子可以通过更改.animate()的内容并将.css()更改为像我在那里写的那样将此动画更改为不同的动画。希望这可以帮助！

来源

2017-07-26 09:55:38

您可以使用这样的

var imageUrl = your image url 
$('button.sajo').click(function() { 
    $('.right-main').css('background-image', 'url(' + imageUrl + ')'); 
});

来源

2017-07-26 10:01:05

如何使用jQuery更改背景图片“点击”？

回答

相关问题