<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.box{
margin:0 auto;
600px;
height: 436px;
overflow: hidden;
position: relative;
}
.box img{
position: absolute;
top:0;
left:0;
cursor: pointer;
}
.box img:nth-child(2){
left: 100px;
}
.box img:nth-child(3){
left: 200px;
}
.box img:nth-child(4){
left: 300px;
}
.box img:nth-child(5){
left: 400px;
}
.box img:nth-child(6){
left: 500px;
}
.compare{
370px;
height: 436px;
background: url("imasges/chanpin_image03.jpg");
position: relative;
margin-left: 100px;
}
.up{
20px;
height: 436px;
background: rgba(230,230,200,0.2);
border-left: 3px #000 solid;
box-shadow:5px 5px 5px rgba(0, 0, 0, 0.6);
margin-bottom: 20px;
position: absolute;
top:0;
right:0;
}
.box2{
1100px;
margin: 0 auto;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('.box img').mouseenter(function () {
var index = $(this).index();
$('.box img').each(function (i,el) {
if(i<=index){
$(el).stop(true).animate({
'left':(i*48)+'px'
},600)
}else if(i>index){
$(el).stop(true).animate({
'left':((i-1)*48+360)+'px'
},600)
}
})
}).mouseleave(function () {
$('.box img').each(function (i,el) {
$(el).stop(true).animate({
'left':i*100+'px'
},100)
})
});
// mask 蒙版
$('.compare').mouseenter(function () {
$(this).mousemove(function (event) {
event=event||window.event;
$('.up').css('width',(parseFloat($('.box2').css('margin-left'))+parseFloat($('.compare').css('margin-left'))+370)-event.pageX);
})
}).mouseleave(function () {
$('.up').css('width','20px');
})
})
</script>
</head>
<body>
<div class="box">
<img src="imasges/chanpin_image01.jpg" width="360px"/>
<img src="imasges/chanpin_image02.jpg" width="360px"/>
<img src="imasges/chanpin_image03.jpg" width="360px"/>
<img src="imasges/chanpin_image04.jpg" width="360px"/>
<img src="imasges/chanpin_image05.jpg" width="360px"/>
<img src="imasges/chanpin_image06.jpg" width="360px"/>
</div>
<div class="box2">
<div class="compare">
<div class="up"></div>
</div>
</div>
</body>
</html>