ブロックの背景画像を変更する方法4つのボタンがあります。1つのボタンを押すと、（フェードインまたはフェードアウト）のようなアニメーションで背景画像が変更されます。私はこのコードを使用して背景を変更しましたが、アニメーションを追加する方法を説明しました。
jQuery(document).ready(function($){
$('#i1').on({
'click': function(){
$('#change-image').css("background-image", "url('../Zelos/img/e1.jpg')");
}
});
$('#i2').on({
'click': function(){
$('#change-image').css("background-image", "url('../Zelos/img/e2.jpg')");
}
});
$('#i3').on({
'click': function(){
$('#change-image').css("background-image", "url('../Zelos/img/e3.jpg')");
}
});
$('#i4').on({
'click': function(){
$('#change-image').css("background-image", "url('../Zelos/img/e4.jpg')");
}
});
});
これは、遷移スタイルルールを使用して実行できます。次に例を示します。 transition: all .6s ease-in
$('#i1').on({
'click': function() {
$('#change-image').css("background-image", "url(http://placekitten.com/1500/1500)");
}
});
$('#i2').on({
'click': function() {
$('#change-image').css("background-image", "url(http://placekitten.com/1200/1200)");
}
});
$('#i3').on({
'click': function() {
$('#change-image').css("background-image", "url(http://placekitten.com/1400/1400)");
}
});
$('#i4').on({
'click': function() {
$('#change-image').css("background-image", "url(http://placekitten.com/1000/1000)");
}
});#change-image{
background: url(http://placekitten.com/500/500) center/cover;
height: 300px;
width: 300px;
transition: all .6s ease-in;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="i1">Click Me 1</button>
<button id="i2">Click Me 2</button>
<button id="i3">Click Me 3</button>
<button id="i4">Click Me 4</button>
<div id="change-image"></div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加