如何使用jQuery更改背景图片?

它应该更改我的HTML中提供的图像。 该函数应该是动态的,以在调用时更改任何图像。

#1楼 票数:0

假设您有以下代码...

 <div id='container'> <img src='some location'> </div> 

您可以使用以下jquery代码更改图片...

 function change_image(){ $("#container").html("<img src='some other image location'>"); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

让我知道它是否有效。

#2楼 票数:0

因为您说过您是jQuery新手,所以我在注释代码方面格外注意。 您没有真正指定背景图像的设置方式,因此我在缩略图上使用了click事件。

编码:

// before doing our magic with jQuery,
// we must wait for the dom to be ready to be manipulated
$(document).ready(function () {

    // listen for a click on any img inside the .images
    $('.images img').on('click', function () {

        // inside the event handlers callback, THIS refers to the img that was clicked
        // here we save the src property of the clicked img to a variable
        var imgSrc = $(this).prop('src');

        changeBackgroundImg(imgSrc);
    });

});

function changeBackgroundImg(imgSrc) {
    // we can set any css property to an element with jQuerys .css()
    $('body').css('background-image', 'url(' + imgSrc + ')');
}

这是一个演示

链接到与代码相关的文档:

  ask by coolkid translate from so

未解决问题?本站智能推荐:

4回复

如何使用jQuery“单击”更改背景图像?

我正在尝试为背景制作动画效果,它应该监听一个事件,该事件将在单击时更改图像。 例如,我单击Sajo Hapyo它应该更改背景图像。 主要问题是所有图像都将具有不同的背景图像,对此我真的很坚持。 我想在我的JS使用backgroundColor: green进行测试,因为要检查它是否有效
1回复

如何使用jquery和css通过动画更改单击背景图像

这个问题已经在这里有了答案: CSS3背景图片过渡 11个答案 如何更改块的背景图像我有四个按钮-按下一个按钮应以动画(淡入或淡出)更改背景图像。 我已经使用此代码更改了背景,但是如何添加动画。
1回复

如何使用jQuery更改按钮单击时的背景图像?

我正在尝试做一个非常简单的事情:单击按钮,将网站的背景更改为其他图像。 我一直在努力使其工作数小时,而背景却没有改变。 我检查了图像目录。 一切都正确,我的代码出了点问题,我看不出它是什么: $("#boots").on("click", function() { $(
2回复

单击按钮更改背景图像(使用jQuery和API)

我正在使用一个API,该API将随机URL返回到随机图像,并将其设置为主体的背景图像。 每次单击按钮后如何更改? 我有下面的代码,但这不起作用。 我在按钮上使用jQuery click事件来调用该函数。 函数每次都会使用图像加载一个新的JSON对象,但背景图像不会改变...
2回复

使用jquery和html5单击更改背景图像

如何使用jquery或java脚本更改背景图片onClick? 例如:我有六(6)张图像,我想在单击“>”(下一个箭头)时更改为下一个背景图像,并在单击“ <”(后退箭头)时更改为上一个背景图像。 我正在使用响应式html5和CSS3开发该网站。 我在做什么错?
3回复

单击使用jQuery时更改背景图像

因此,我有一个未按下的按钮图像。 我希望网站显示未推送的图像。 当用户单击按钮时,它会显示按下的按钮图像,然后在释放单击时返回到未按下的图像。 HTML CSS jQuery的 然后,当用户释放点击时,它应该返回到btn-unclicked图片。 上面的代码不
3回复

如何使用jQuery单击更改body元素的背景图像

我已经通过CSS文件在主体部分中实现了背景图片,并且可以正常工作。 但是,我需要根据用户单击的选项卡更改此图像。 现在,我认为这已经足够简单了,在阅读并尝试了许多文章中的解决方案后,我无法弄清楚哪里出了问题。 所以基本上我的主要设置是: CSS: 这在显示背景图像时起
5回复

如何使用jQuery更改主体的背景图像

我试图在单击按钮时更改主体的背景。首先,我使用像这样的body{background-image:url("../images/image.jpg")}并且有一个按钮od更改并使用了此jquery代码$("#change").click(function(){$("body").css({"ba