效果图-图片为动图
鼠标划过时,图片显示,其他图片变小,鼠标移出时,所有图片均匀显示
HTML
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1300px;
}
#box {
width: 1200px;
height: 350px;
border: 2px solid red;
margin: 100px auto;
}
#box li {
width: 240px;
height: 350px;
/*border: 1px solid #000;*/
float: left;
}
</style>
JS
一定要引入jQuery文件,可前往jQuery官网下载:jQuery官网
<script src="../js/jquery-2.2.4.js"></script>
自己书写的JS
//循环设置背景图
$('li').each(function (k, v) {
//在此处修改url,将图片更改为自己本地的图片
$(v).css('background', 'url(../images/' + (k + 1) + '.jpeg)');
})
//鼠标移入时,对应的图片放大,其他的图片变小
$('ul li').mouseover(function () {
// console.log(this);
$(this).stop().animate({ width: 800 }).siblings().stop().animate({ width: 100 })
})
//鼠标移出时,恢复
$('ul').mouseout(function(){
$("ul li").stop().animate({width:240});
})