先看看效果:
该效果为王者荣耀官网上面的效果,下面我们将实现这个效果。
分析:
静态页面实际上是ul标签下面包含了7个小li标签,然后每一个小li标签下面有两张图片,一个为表面的小图片和被隐藏之后的大图片,然后小图片是以绝对定位显示在小li中,而小li标签是以相对定位排列在ul标签当中;当鼠标进入小li标签时,要让li标签大小变为大图片的大小,同时小图片淡出,大图片淡入,还要注意的是:要运用排它思想(jquery中siblings()得到兄弟li标签,然后设置兄弟li标签的大图片淡出,小图片淡入),还原其他小li标签的状态。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js2</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="contain">
<p class="title">周免英雄</p>
<ul>
<li class="current active">
<a>
<img class="small" src="image/wzry/126.jpg" width="69px" height="69px">
<img class="big" src="image/wzry/126-freehover.png" width="224px" height="69px">
</a>
</li>
<li>
<a>
<img class="small" src="image/wzry/134.jpg" width="69px" height="69px">
<img class="big" src="image/wzry/134-freehover.png" width="224px" height="69px">
</a>
</li>
<li>
<a>
<img class="small" src="image/wzry/141.jpg" width="69px" height="69px">
<img class="big" src="image/wzry/141-freehover.png" width="224px" height="69px">
</a>
</li>
<li>
<a>
<img class="small" src="image/wzry/148.jpg" width="69px" height="69px">
<img class="big" src="image/wzry/148-freehover.png" width="224px" height="69px">
</a>
</li>
<li>
<a>
<img class="small" src="image/wzry/171.jpg" width="69px" height="69px">
<img class="big" src="image/wzry/171-freehover.png" width="224px" height="69px">
</a>
</li>
<li>
<a>
<img class="small" src="image/wzry/177.jpg" width="69px" height="69px">
<img class="big" src="image/wzry/177-freehover.png" width="224px" height="69px">
</a>
</li>
<li>
<a>
<img class="small" src="image/wzry/195.jpg" width="69px" height="69px">
<img class="big" src="image/wzry/195-freehover.png" width="224px" height="69px">
</a>
</li>
</ul>
</div>
</body>
<style>
.contain{
position: fixed;
top: 200px;
left: 10%;
background-color: rgb(29, 67, 105);
}
.title{
margin-left: 10px;
color: white;
}
.contain ul{
display: inline;
white-space: nowrap;
padding: 0;
width: 1344px;
overflow: hidden;
}
ul li{
position: relative;
display: inline-block;
margin-left: 10px;
width: 69px;
height: 69px;
left: 0;
top: 0;
}
img{
border-radius: 7px;
}
.current .small{
display: none;
}
.current .big{
display: block;
}
.small{
position: absolute;
display: block;
left: 0;
top:0;
}
.big{
display: none;
}
.active{
width: 224px;
}
</style>
<script type="text/javascript">
$('li').mouseenter(function(){
$(this).stop().animate({
width: 224
},400).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
$(this).siblings('li').stop().animate({
width: 69
},400).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut(); // 排它思想,还原兄弟li标签的状态
});
</script>
</html>