我试图让 splatter.png 在点击所有 gif 后显示。我试过使用 Z-Index，但它似乎不起作用。难道只是设置错了吗？或者有其他设置方法吗？
HTML
<head>
<title>Movement</title>
<style>
div.a {
width: 200px;
height:200px;
position:absolute;
background-image: url("ant.gif");
z-index: -1;
}
</style>
<script src="jquery-3.1.1.js"></script>
<script src="please-work.js"></script>
</head>
<body>
<div class="animatedDivs"></div>
</body>
</html>
JavaScript
$(document).ready(function () {
newDiv();
newDiv();
newDiv();
});
function newDiv() {
var $div = $("<div class='a'>");
$(".animatedDivs").append($div);
animateDiv();
$div.click(function(){
$div.css('background-image','url(splatter.png)', ('z-index', -10));
//$(this).data('clicked', true);
var offset = $div.position();
$div.stop();
$div.position({left:(offset.left), right: (offset.right)});
});
function animateDiv() {
var newq = makeNewPosition();
var oldq = $div.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$div.animate({
top: newq[0],
left: newq[1]
}, speed, function () {
animateDiv();
});
};
}
function makeNewPosition() {
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = .1;
var speed = Math.ceil(greatest / speedModifier);
return speed;
}
最佳答案
问题在于您分配 css 方法的位置。
$div.css('background-image','url(splatter.png)', ('z-index', -10));
jQuery.css() 函数不能有三个参数。您可以传递两个参数(名称、值)或一个 json 对象(名称值对)
$div.css('background-image', 'url(splatter.png)').css('z-index', -10);
或
$div.css({'background-image':'url(splatter.png)','z-index':-10});
关于javascript - 如何从 JavaScript 获取 Onclick 图像以落后于所有其他图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42794499/