注：图片来源网络图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标滑过放大/左移</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.show-big,.show-left{
height: 200px;
width: 650px;
margin: 0 auto;
}
.show-big ul,.show-left ul{
width: 100%;
height: 150px;
}
.show-big ul li,.show-left ul li{
float: left;
width: 100px;
border: 1px solid #ff5400;
padding: 4px;
margin: 1%;
cursor: pointer;
transition: all 0.6s;
}
.show-big ul li img,.show-left ul li img{
width: 100px;
}
.show-big ul li:hover{
transform: scale(1.4);
}
.show-left ul li{
transition: 0.3s all ease;
}
.show-left ul li:hover{
-webkit-transform: translate(-10px, 0);
-moz-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
</style>
</head>
<body>
<!-- 鼠标滑过图片放大 -->
<div id="showBig" class="show-big">
<ul>
<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
</ul>
</div>
<!-- 鼠标滑过li左移 -->
<div id="showLeft" class="show-left">
<ul>
<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
</ul>
</div>
</body>
</html>
