主要运用:淡入fadIn()、attr()方法改变图片、动画animate()、hover()
实例中的图片可以用其他图片代替,改变图片需要注意改变盒子宽高
效果图:
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js动画案例1--王者荣耀手风琴</title>
<style>
.box {
width: 1000px;
height: 110px;
background: url(./素材1/images/bg.png) no-repeat;
line-height: 100px;
margin-top: 10px;
position: relative;
}
ul {
position: absolute;
display: flex;
margin-top: 5px;
padding-left: 5px;
}
ul li {
width: 100px;
height: 100px;
list-style: none;
line-height: 20px;
padding-right: 5px;
}
</style>
</head>
<script src="./js/jquery-3.6.0.js"></script>
<body>
<div class="box">
<ul>
<li class="l1">
<img src="./素材1/images/m1.jpg" alt="#"></li>
<li class="l2">
<img src="./素材1/images/l1.jpg" alt="#" width="100" height="100"></li>
<li class="l3">
<img src="./素材1/images/c1.jpg" alt="#"></li>
<li class="l4">
<img src="./素材1/images/w1.jpg" alt="#"></li>
<li class="l5">
<img src="./素材1/images/z1.jpg" alt="#"></li>
<li class="l6">
<img src="./素材1/images/h1.jpg" alt="#"></li>
<li class="l7">
<img src="./素材1/images/t1.jpg" alt="#" width="100" height="100"></li>
</ul>
</div>
<script>
$(".l1").hover(
function () {
$(".l1>img").fadeIn(30, 0.3, function () {
$(".l1>img").attr({
'src': './素材1/images/m.png',
height: "100",
})
$(".l1>img").css('vertical-align', 'middle')
})
$('.l1')
.stop().animate({
"width": 330
}, 1000, "linear")
},
function () {
$('.l1').stop().animate({
"width": 100
}, 1000, "linear", function () {
$(".l1>img").fadeIn(30, 0.3, function () {
$(".l1>img").attr({
'src': './素材1/images/m1.jpg'
})
})
})
})
$(".l2").hover(
function () {
$(".l2>img").fadeIn(30, 0.3, function () {
$(".l2>img").attr({
'src': './素材1/images/l.png',
height: "100",
width: "300"
})
$(".l2>img").css('vertical-align', 'middle')
})
$('.l2')
.stop().animate({
"width": 300
}, 1000, "linear")
},
function () {
$('.l2').stop().animate({
"width": 100
}, 1000, "linear", function () {
$(".l2>img").fadeIn(30, 0.3, function () {
$(".l2>img").attr({
'src': './素材1/images/l1.jpg',
width: "100"
})
})
})
})
$(".l3").hover(
function () {
$(".l3>img").fadeIn(30, 0.3, function () {
$(".l3>img").attr({
'src': './素材1/images/c.png',
height: "100",
})
$(".l3>img").css('vertical-align', 'middle')
})
$('.l3')
.stop().animate({
"width": 330
}, 1000, "linear")
},
function () {
$('.l3').stop().animate({
"width": 100
}, 1000, "linear", function () {
$(".l3>img").fadeIn(30, 0.3, function () {
$(".l3>img").attr({
'src': './素材1/images/c1.jpg'
})
})
})
})
$(".l4").hover(
function () {
$(".l4>img").fadeIn(30, 0.3, function () {
$(".l4>img").attr({
'src': './素材1/images/w.png',
height: "100",
})
$(".l4>img").css('vertical-align', 'middle')
})
$('.l4')
.stop().animate({
"width": 330
}, 1000, "linear")
},
function () {
$('.l4').stop().animate({
"width": 100
}, 1000, "linear", function () {
$(".l4>img").fadeIn(30, 0.3, function () {
$(".l4>img").attr({
'src': './素材1/images/w1.jpg'
})
})
})
})
$(".l5").hover(
function () {
$(".l5>img").fadeIn(30, 0.3, function () {
$(".l5>img").attr({
'src': './素材1/images/z.png',
height: "100",
})
$(".l5>img").css('vertical-align', 'middle')
})
$('.l5')
.stop().animate({
"width": 330
}, 1000, "linear")
},
function () {
$('.l5').stop().animate({
"width": 100
}, 1000, "linear", function () {
$(".l5>img").fadeIn(30, 0.3, function () {
$(".l5>img").attr({
'src': './素材1/images/z1.jpg'
})
})
})
})
$(".l6").hover(
function () {
$(".l6>img").fadeIn(30, 0.3, function () {
$(".l6>img").attr({
'src': './素材1/images/h.png',
height: "100",
})
$(".l6>img").css('vertical-align', 'middle')
})
$('.l6')
.stop().animate({
"width": 330
}, 1000, "linear")
},
function () {
$('.l6').stop().animate({
"width": 100
}, 1000, "linear", function () {
$(".l6>img").fadeIn(30, 0.3, function () {
$(".l6>img").attr({
'src': './素材1/images/h1.jpg'
})
})
})
})
$(".l7").hover(
function () {
$(".l7>img").fadeIn(30, 0.3, function () {
$(".l7>img").attr({
'src': './素材1/images/t.png',
height: "100",
width: "300"
})
$(".l7>img").css('vertical-align', 'middle')
})
$('.l7')
.stop().animate({
"width": 300
}, 1000, "linear")
},
function () {
$('.l7').stop().animate({
"width": 100
}, 1000, "linear", function () {
$(".l7>img").fadeIn(30, 0.3, function () {
$(".l7>img").attr({
'src': './素材1/images/t1.jpg',
width: "100"
})
})
})
})
</script>
</body>
</html>