Question

我想要一个像按钮一样的小图片，可以点击一个功能来改变身体背景图像。我是一个新手，我正在努力学习。我想，最简单的方法是使用background-image的div。我也必须使用非语义网格。

所以我几乎只有背景图像的div。我该如何写这个函数？我确定这很简单，我在这里看了20个帖子，但没有一个对我有用

编辑：添加了我的代码

＆＃13;

#knapp {
  height:50px;
  width:50px;
  background-image:url(http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png);
  background-repeat:no-repeat;
  background-size:contain;	
  position:absolute;
  top:90vh;
  right:3vw;
}

＆＃13;

<div id="knapp" class="grid-10 prefix-90"></div>

＆＃13;

Answer 1

在div上添加光标以显示可点击

   #knapp {
      cursor: pointer;
   }

您可以将新的背景图像放入新的css规则

body.newbg {
    background-image:url(path-to-new-background.png);
}

这是带有旧背景图像的正文

body {
    background-image:url(path-to-old-background.png);
}

并使用jquery通过执行类似的操作（在$(document).ready()中）添加/切换类：

$('#knapp').on('click', function(){

    $('body').addClass('newbg');
    // you could instead do toggleClass if you want for each click to have background switch between old background and new background
});

与其他所有答案相比，这是一种更清晰的方法，因为它将表示（css），结构（html）和行为（javascript）分开。这是因为它不使用JavaScript直接更改样式。它也不会用onclick污染html，这也是一种不好的做法。

这是一个傻瓜：https://plnkr.co/edit/aiGZmvvi6WWGFs7E9xTp

这里有一个圆形的背景集（感谢Kai的想法） https://plnkr.co/edit/0djmmNM9OOTdfYyvLvUH?p=preview

Answer 2

创建一个onclick属性按钮，其功能名称为replace。

在脚本中定义了函数，如：

function replace() {
   document.body.style.backgroundImage = 'url(https://lh6.ggpht.com/8mgTDZXaLMS1JsnF28Tjh6dahHwN1FqcXCVnifkfppmNLqnD-mPBuf9C1sEWhlEbA4s=w300)';  
}

说明：

您可以将正文的style属性（使用document.body对象）设置为其他background-image。

如果事情不明确，我很乐意解释。

工作示例：

function replace() {
  document.body.style.backgroundImage = 'url(https://lh6.ggpht.com/8mgTDZXaLMS1JsnF28Tjh6dahHwN1FqcXCVnifkfppmNLqnD-mPBuf9C1sEWhlEbA4s=w300)';  
}

body {
  background-image: url(http://www.julienlevesque.net/preview/google-smile-preview.jpg);
}

div {
  background:blue;
  color:#fff;
  float:left;
}

<div onclick="replace()">Replace background-image</div>

Answer 3

如果我理解了这个问题，你应该能够在jQuery中创建一个变量，它是你想要使用的图像网址的所有字符串版本的数组：

var images = ['../images/####','../images/$$$$', 'http://some.other/url.here];

// do this for as many images as you want to cycle through

就像那样。

然后你可以制作一个计数器变量：

var counter = 0;

并将其设置为零。

接下来，将事件监听器on()添加到div，如下所示：

$('#knapp').on('click', function(){



});

最后，在您的事件侦听器中，将div的CSS background-image属性更改为数组中的一个图像：

// do this inside a document.ready() function
$('#knapp').on('click', function(){

    $(this).css('background-image','url("' + images[counter] + '")');
    counter++;

});

我希望这有帮助！另外，请记住增加counter

编辑---------------------------------------- ------------------------

好的，所以我完全跳过了一些明显的事情，即计数器可能过高并且访问超出范围的东西。为防止这种情况，请在on()侦听器中添加以下内容：

if(counter >= images.length - 1){ counter = 0; }

编辑2 --------------------------------------- -----------------------

好的，所以我一开始并不知道你究竟在问什么，所以这是我的第二个答案。因为看起来你实际上想要做的只是在点击时切换一次背景图像，那么你可以使用这样的东西：

$(document).ready(function(){ $('#knapp').on('click', function(){ $(this).css('background-image','url("YOUR_NEW_URL_HERE")'); }); });

或者您可以通过在CSS中创建两个相同的类（背景图像除外）并使用.addClass和.removeClass替换另一个来在两个图像之间切换。

编辑3 --------------------------------------- ------------------------

我从未想过我会多次编辑此帖子，但显然我错过了body背景图片应该更改（感谢评论）。我的不好并感谢你指出它（即使你和别人说话）。

Answer 4

这可能对你有所帮助......

$('.yourClassofDiv').click({
   $(this).css("background-image",'url("' + URLofIMAGE+ '")')
});

Answer 5

尝试在onclick元素上使用div#knapp，将document.body.style.background设置为图片文件的网址

#knapp {
  height:50px;
  width:50px;
  background-image:url(http://lorempixel.com/50/50);
  background-repeat:no-repeat;
  background-size:contain;	
  position:absolute;
  top:90vh;
  right:3vw;
}

<div id="knapp" class="grid-10 prefix-90" onclick="document.body.style.background = 'url(http://lorempixel.com/'+ window.innerWidth + '/'+ window.innerHeight +') no-repeat'"></div>

Answer 6

这是jquery中的一种简单方法

＆＃13;

$(document).ready(function() {
  $("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/detail-requiem.jpg)').css('background-repeat', 'no-repeat');
  $('div').css('cursor', 'pointer').click(function() {
        $("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/Requiem-Julien-Levesque.jpg)');
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
  <div style="background-color:yellow">Click Here to change background Image</div>
</body>

＆＃13;

这里我将解释代码。 jQuery语法是为选择HTML元素和对元素执行某些操作而量身定制的。

基本语法是：$(selector).action()

A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

以下是代码中发生的事情。

1

$(document).ready(function(){

   // jQuery methods go here...

});

这是为了防止任何jQuery代码在文档加载完成之前运行（准备就绪）。在使用文档之前等待文档完全加载并准备就绪是一种好习惯。这也允许您将JavaScript代码放在文档正文之前的head部分中。

2

$("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/detail-requiem.jpg)').css('background-repeat', 'no-repeat');

获取html的body元素，并使用.css()操作设置其背景图片。我给了它更多的一个动作

3

$('div').css('cursor', 'pointer').click(function() {
        $("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/Requiem-Julien-Levesque.jpg)');
    });

这是发生变化的地方。我通过div得到clicked $('div')并首先给它一个动作，将鼠标更改为光标以指示其可点击，然后给它点击功能，我们的背景图像点击

即可更改

div onclick功能可以改变身体背景图像

6 个答案: