<!DOCTYPE HTML>
<html>
<head>
<title>js放大镜效果</title>
<meta http-equiv=
"content-type"
content=
"text/html;charset=utf-8"
/>
<style>
*{
margin:0px;
padding:0px;
border:none;
list-style:none;
}
#box{
margin:80px auto;
width: 352px;
}
#box p
{
width: 350px;
height: 350px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
#box p img
{
width:350px;
height:350px;
}
#box h1
{
width: 352px;
height: 54px;
overflow:hidden;
position:relative;
}
#box h1 div
{
width:310px;
height: 54px;
margin:0px auto;
position:relative;
}
#box h1 div ul
{
position:absolute;
left: 0px;
top: 0px;
}
#box h1 ul li
{
width: 62px;
float: left;
}
#box h1 ul li img
{
width: 50px;
height: 50px;
padding: 1px;
border: 1px solid #CECFCE;
}
#box h1 img.hoveredThumb{
border: 2px solid #e4393c;
padding: 0;
}
p#medImgBox{
position: relative;
}
#jing{
position: absolute;
left: 0;
top: 0;
width: 175px;
height: 175px;
border-radius:50%;
background: #ffd;
opacity: 0.7;
display: none;
}
#medImgBox #mian{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: move;
opacity: 0;
}
#largeImgBox{
position:absolute;
width: 175px;
height: 175px;
border-radius:50%;
border: 1px solid #faa;
top: 0px;
left: 352px;
overflow: hidden;
display: none;
}
#largeImg{
display: none;
position: absolute;
}
</style>
</head>
<body >
<div id=
"box"
>
<p id=
"medImgBox"
>
<img src=
"/static/imghw/default1.png"
data-src=
"images/product-s1-m.jpg"
class
=
"lazy"
id=
"mediumImg"
/ alt=
"Lupeneffekt, implementiert von nativem js"
>
<span id=
"jing"
></span>
<span id=
"mian"
></span>
<span id=
"largeImgBox"
>
<img src=
"/static/imghw/default1.png"
data-src=
"images\product-s1.jpg"
class
=
"lazy"
id=
"largeImg"
/ alt=
"Lupeneffekt, implementiert von nativem js"
>
</span>
</p>
<h1>
<div>
<ul id=
"list"
>
<li><img src=
"/static/imghw/default1.png"
data-src=
"images\product-s1.jpg"
class
=
"lazy"
/ alt=
"Lupeneffekt, implementiert von nativem js"
></li>
<li><img src=
"/static/imghw/default1.png"
data-src=
"images\product-s2.jpg"
class
=
"lazy"
/ alt=
"Lupeneffekt, implementiert von nativem js"
></li>
<li><img src=
"/static/imghw/default1.png"
data-src=
"images\product-s3.jpg"
class
=
"lazy"
/ alt=
"Lupeneffekt, implementiert von nativem js"
></li>
<li><img src=
"/static/imghw/default1.png"
data-src=
"images\product-s4.jpg"
class
=
"lazy"
/ alt=
"Lupeneffekt, implementiert von nativem js"
></li>
<li><img src=
"/static/imghw/default1.png"
data-src=
"images\product-s1.jpg"
class
=
"lazy"
/ alt=
"Lupeneffekt, implementiert von nativem js"
></li>
</ul>
</div>
</h1>
</div>
<script>
var
imgList = document.querySelectorAll('#box ul li img');
for
(
var
i=0; i<imgList.length; i++){
var
img = imgList[i];
img.onmouseover = changeThumbImg;
}
function
changeThumbImg(){
var
previousHovered = document.querySelector('.hoveredThumb');
if
(previousHovered==null){
this.className = 'hoveredThumb';
changeMediumImg(this.src);
}
else
if
(previousHovered!=this){
previousHovered.removeAttribute('
class
');
this.className = 'hoveredThumb';
changeMediumImg(this.src);
}
}
function
changeMediumImg(thumbSrc){
var
dotIndex = thumbSrc.lastIndexOf('.');
var
prefix = thumbSrc.substring(0, dotIndex);
var
suffix = thumbSrc.substring(dotIndex);
var
mediumSrc = prefix + '-m'+suffix;
document.getElementById('mediumImg').src = mediumSrc;
}
document.querySelector('#mian').onmousemove =
function
(event){
var
x = event.offsetX;
var
y = event.offsetY;
var
jing = document.getElementById('jing');
var
w = jing.offsetWidth;
var
h = jing.offsetHeight;
var
left = x<w/2 ? 0 : (x-w/2);
var
top = y<h/2 ? 0 : (y-h/2);
if
(x>(w*2-w/2)){
left = w*2 - w;
}
if
(y>(h*2-h/2)){
top = h*2 - h;
}
jing.style.left = left+'px';
jing.style.top = top+'px';
var
largeImg = document.getElementById('largeImg');
largeImg.style.left = (-left*largeImg.width/350) + 'px';
largeImg.style.top = (-top*largeImg.height/350)+'px';
}
document.querySelector('#mian').onmouseover =
function
(){
var
jing = document.getElementById('jing');
jing.style.display = 'block';
var
largeImgBox = document.getElementById('largeImgBox');
largeImgBox.style.display = 'block';
var
src = document.querySelector('#mediumImg').src;
var
dotIndex = src.lastIndexOf('.');
var
prefix = src.substring(0, dotIndex-2);
var
suffix = src.substring(dotIndex);
src = prefix + '-l'+ suffix;
var
largeImg = document.getElementById('largeImg');
largeImg.src = src;
largeImg.style.display='block';
}
document.querySelector('#mian').onmouseout =
function
(){
var
jing = document.getElementById('jing');
jing.style.display = 'none';
document.getElementById('largeImgBox').style.display = 'none';
}
</script>
</body>
</html>