我有一个只能播放一次的gif。
我想在每次单击按钮时播放gif。
现在,一旦它完成播放gif,它将在第二次结束时停止移动。
CSS
html { font-size: 62.5%; }
.target {
position: absolute;
bottom: 0;
right: 0;
width: 37.6rem;
height: 31.1rem;
background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190410/20190410164103.gif);
}
@mixin ghost {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff;
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
color: rgba(0, 0, 0, 1);
}
@keyframes inhale {
from {
opacity: 1;
top: 50%;
left: 50%;
transform: scale(1) translate(-50%, -50%);
}
to {
opacity: 0;
top: calc(100% - 100px);
left: calc(100% - 100px);
transform: scale(0) translate(-50%, -50%);
}
}
iframe {
transform-origin: 0% 0%;
}
.clsbtn {
outline: none;
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 3.5rem;
line-height: 3.5;
background: white;
-webkit-transition: .3s;
transition: .3s;
background-color: rgba(255, 255, 255, 0);
border-color: rgba(255, 255, 255, 0);
color: rgba(255, 255, 255, 0);
z-index: 111;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
&:hover {
@include ghost;
}
}
.inhale {
animation: inhale 1s cubic-bezier(0, 1, .56, 1);
}
jQuery
var timeStamp = new Date().getTime();
$(".target").attr('background','url(../img/score.gif' + '?' + timeStamp + ')');
整个图片
function closeBtn() {
$(".clsbtn").on('click', function() {
var target = $("<div>").addClass('target');
// here
var timeStamp = new Date().getTime();
$(".target").attr('background','url(../img/score.gif' + '?' + timeStamp + ')');
$(this).hide();
$("iframe").addClass('inhale').before(target).one('animationend', function() {
$("iframe").removeClass('inhale').empty(target);
$("#items").magnificPopup('close');
});
});
}
HTML
<div id="items">
<section class="item" data-mfp-src="data1.html">
<img src="img/a.png" alt="a" />
<h2>title1</h2>
<p>description1</p>
</section>
<section class="item" data-mfp-src="data2.html">
<img src="img/b.png" alt="b" />
<h2>title2</h2>
<p>description2</p>
</section>
...
</div>
就我而言,如何每次点击播放gif?
当我用JSFiddle和Codepen尝试时,它可以正常工作。 :O
(每次点击都会播放gif)
gif在本地环境中不能正常工作吗?
答案 0 :(得分:0)
元素没有原始$(".target").attr('background', ...)
属性,而不是$(".target").css('background', ...)
设置了background
,并且设置它不会触发任何原生操作。