<!DOCTYPE html>
<html>
<head>
<title>H5模板网 http://www.h5tpl.com</title>
<style type="text/css">
body{
background-color: #d8e7fa;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.itemarea{
width: 280px;
height: 480px;
border: 1px #888 solid;
margin: 100px auto;
position: relative;
box-shadow: 2px 1px 1px 1px rgba(0,0,0,0.3);
}
.itemarea .pic{
margin-bottom: 15px;
}
.itemarea .pic img{
width: 280px;
height: 400px;
}
.itemarea .pic .cover{
width: 107px;
height: 153px;
position: absolute;
top: 0px;
left: 0;
background-image: url('a.png');
}
.itemarea .list{
display: flex;
}
.itemarea .list li{
margin: auto;
}
.itemarea .list img{
width: 30px;
height: 50px;
display: block;
}
.itemarea .list .current{
border: 2px solid yellow;
}
.itemarea .detail{
width: 300px;
height: 400px;
border: 1px #888 solid;
position: absolute;
top: -1px;
left: 280px;
/* display: none;*/
background-image: url(1.jpg);
background-size: 260%;
}
</style>
</head>
<body>
<div class="itemarea">
<div class="pic">
<img src="1.jpg">
<div class="cover"></div>
</div>
<ul class="list">
<li ><img src="1.jpg" class="current"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
<li><img src="5.jpg"></li>
<li><img src="6.jpg"></li>
</ul>
<div class="detail">
</div>
</div>
</body>
<script type="text/javascript">
var list = document.querySelector('.list');
var imgs = list.querySelectorAll('img');
var img = document.querySelector('.pic img');
var pic = document.querySelector('.itemarea .pic');
var cover = document.querySelector('.cover');
var detail = document.querySelector('.detail');
list.addEventListener('mousemove',function(e){
if(e.target.tagName == 'IMG'){
img.src = e.target.src;
detail.style.backgroundImage = 'url('+e.target.src+')';
imgs.forEach(function(item){
item.className = '';
})
e.target.className = 'current';
}
})
pic.addEventListener('mousemove',function(e){
var x = e.clientX;
var y = e.clientY;
var cx = pic.getBoundingClientRect().left;
var cy = pic.getBoundingClientRect().top;
var tx = x - cx -75;
var ty = y - cy -107;
if(tx<0){
tx = 0;
}
if(ty<0){
ty = 0;
}
if(tx>180){
tx = 180;
}
if(ty>245){
ty = 245;
}
detail.style.backgroundPosition = tx/180*100+'%'+ty/245*100+'%';
cover.style.left = tx + 'px';
cover.style.top = ty + 'px';
})
</script>
宠物免费领养小程序，欢迎来踩
