Question

在决定在这里发布我的问题之前，我已经浏览了很多关于这个话题的主题。这些线程都没有回答我的问题或解决了我的问题（我已尝试过那里提出的所有解决方案）。

我想要做的是显示一堆缩略图，每当鼠标指向其中一个时，将相应的图像作为背景。背景（和所有屏幕元素）按窗口比例缩放。图像列表可能很长（它是一个目录），所以我不想交换样式和类。我想更改页面的背景图片。

我的测试平台是Google Chrome（最新版本）。

我正在使用jquery 3.3.1。我的背景是以一种风格定义的：

.bgImage {
    background: url("http://www.descent2.de/Schmuck/images/title.jpg")  
no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

<head>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
       function SetBackground (image)
       {
          // this doesn't work
          $('#background').css('background-image', 'url ("' + image.src + '")');
          // this doesn't work, too
          $('#background').css('background', 'url ("' + image.src + '")  
no-repeat center center fixed');
          // this still shows the old background image url
          alert ($('#background').css('background-image'));
       }
</head>

<body>
    <div id="background" class="bgImage">
    </div>

This code calls the background image changer. That works, I verified it.

<div id="thumbs">
    <article id="thumbs-content">
       <div class="thumb-size"><img class="thumb" id="thumb1" 

onmouseenter="SetBackground(this)" src="title.jpg"></div>
    </article>
</div>

</body>

首先，通过单独的＆＃34;背景图像＆＃34;来定义bgImage类样式中的背景图像。声明不起作用 - 即使最初加载页面，也不会显示任何背景图像。

此外，既不通过背景图像＆＃34;也不通过＆＃34;背景＆＃34;更改背景图像。将在javascript函数SetBackground（）中工作。

尝试使用

检索当前背景名称的网址

alert ($('#background').css ('background-image'));

返回旧背景图片的网址。

我一直在努力理解并解决这个问题几个小时，我完全被困住了。

我做错了什么？

编辑：以下是我目前正在建设的完整网站的链接（非常简单和基本）：http://www.descent2.de/Schmuck/index.html

Answer 1

在多个元素上内联调用javascript函数存在一些问题。它将您的图像源返回为undefined。这是我为你工作的jsfiddle。我想这就是你的尝试。

我从image元素中删除了onmousenter函数内联函数，并将其放在一个单独的函数中。这样做会使var img_src = $(this).attr("src");不再返回undefined。因此，之前建议的解决方案将正常工作。我希望jsfiddle有所帮助。

$('.thumb').mouseenter(function() {
  var img_src = $(this).attr("src");
  $('#background').css('background-image', 'url(' + img_src + ')');
});

Answer 2

您不必将其作为参数SetBackground（）发送。在函数中我会做$（this）.attr（“src”）;所以它会是这样的：

<html>
    <head>
      <title>Example</title>
      <style type="text/css">
    .bgImage {
        background: url("http://www.descent2.de/Schmuck/images/title.jpg")  no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
      }
      </style>
      <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script type="text/javascript">
         function SetBackground()
         {
          var current_src = $('#thumb1').attr("src");
          $('#background').css('background', 'url("' + current_src + '")');
         }
      </script>
    </head>

    <body>
        <div id="background" class="bgImage">
        </div>
        <div id="thumbs">
          <article id="thumbs-content">
             <div class="thumb-size"><img class="thumb" id="thumb1" onmouseenter="SetBackground()" src="title.jpg"></div>
          </article>
        </div>
    </body>
    </html>

Answer 3

看起来双引号是个问题。

这应该有效：

$('#background').css('background-image', 'url(' + image.src + ')');

更改div的背景图片并不适合我

3 个答案: