0
クリックした時点ですべてのgifの後ろにsplatter.pngを表示しようとしています。私はZ-Indexを使ってみましたが、動作していないようです。間違って設定されていますか？あるいはそれを設定する別の方法がありますか？JavaScriptからOnclick画像を取得する方法
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;
}
を二つの引数（名前、値）またはJSONオブジェクトを渡します（名前と値のペア）するか、あなたは 'Z-index'のための正の数を使用してみましたか？ –
@KevinJantzerはい私はまだ何も得ていません。 –