如何從JavaScript獲取Onclick圖像以落后於所有其他圖像

Question

我試圖讓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;

}

Answer 1

問題是您在哪里分配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獲取Onclick圖像以落后於所有其他圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2017-03-14 19:36:53

如何從JavaScript獲取Onclick圖像以落后於所有其他圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2017-03-14 19:36:53

解決方案1
0 已采納 2017-03-14 19:36:53