<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#box1{
margin: 300px;
margin-left: 200px;
}
#box2{
width: 1100px;
height: 50px;
float: left;
background-color: #113659;
opacity: 0.9;
}
h2{
margin-left: 50px;
color: #A2ACBA;
font-size: 20px;
line-height: 50px;
}
#box3{
width: 1100px;
height: 120px;
float: left;
background-color: #113659;
opacity: 0.9;
}
body{
background-image: url(images/wzimg/bj.jpg);
}
.hero{
float: left;
line-height: 150px;
z-index:10;
}
.big{
display: none;
width: 300px;
height: 100px;
line-height: 150px;
margin: 10px;
background-image: url(images/wzimg/);
}
.small{
display: block;
width: 100px;
height: 100px;
line-height: 150px;
margin: 10px;
}
</style>
<script src="jquery/jquery-3.0.0.js"></script>
<script>
$(function(){
$(".hero").mouseover(function(){
$(this).stop().animate({
width:310,
height:110,
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
$(this).siblings().stop().animate({
width:110,
height:110,
}).find(".big").stop().fadeOut().siblings(".small").stop().fadeIn();
})
});
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<h2>周免英雄 (1月25日-1月31日)</h2>
</div>
<div id="box3">
<div class="hero">
<img class="big" src="images/wzimg/dw.png">
<img class="small" src="images/wzimg/1dw.png">
</div>
<div class="hero">
<img class="big" src="images/wzimg/wzj.png">
<img class="small" src="images/wzimg/1wzj.png">
</div>
<div class="hero">
<img class="big" src="images/wzimg/blxc.png">
<img class="small" src="images/wzimg/1blxc.png">
</div>
<div class="hero">
<img class="big" src="images/wzimg/sl.png">
<img class="small" src="images/wzimg/1sl.png">
</div>
<div class="hero">
<img class="big" src="images/wzimg/jl.png">
<img class="small" src="images/wzimg/1jl.png">
</div>
<div class="hero">
<img class="big" src="images/wzimg/smx.png">
<img class="small" src="images/wzimg/1smx.png">
</div>
<div class="hero">
<img class="big" src="images/wzimg/y.png">
<img class="small" src="images/wzimg/1y.png">
</div>
</div>
</div>
</body>
</html>
王者荣耀手风琴特效
最新推荐文章于 2024-06-12 20:47:03 发布