1张图片-放大镜:
缺点：1张图片若为小图，小图放大后图像不清晰（若为大图，则不存在这个问题）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 1张图片 放大镜:</title>
<style>
/* reset css 样式重置 */
body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{
margin: 0;
padding: 0;
}
body{font-size:16px;}
table{border-collapse: collapse;}
select,textarea,input{outline:none; border: none; background:#fff; }
textarea{ resize: none; overflow: auto}
a{ text-decoration: none;}
li{ list-style: none; vertical-align: top}
img{ border:none; vertical-align: top}
/* end reset css */
.wrap{
position: relative;
height: 400px; width: 850px; margin:100px 0 0 400px ;
background: #ccc;
}
.wrap .smallImg, .wrap .bigImg{
position: absolute;
top: 0;
width: 400px; height: 400px; outline: 2px solid red;
overflow: hidden;
}
.wrap .smallImg{
left: 0;}
.wrap .bigImg{
left: 450px;
display: none;
}
.wrap .bigImg img{
position: absolute;
left: 0;
top: 0;
}
#shadow{
position: absolute;
left: 0;
top: 0;
display: none;
width: 100px;
height: 100px;background: rgba(0,0,255,0.5)}
</style>
<script>
window.onload = function(){
var wrap = document.getElementsByClassName("wrap")[0];
var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
var smallImg = smallImgBox.getElementsByTagName("img")[0];
var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
var bigImg = bigImgBox.getElementsByTagName("img")[0];
var shadow = document.getElementById("shadow")
smallImgBox.onmouseover = function () {
shadow.style.display="block";
bigImgBox.style.display="block";
};
smallImgBox.onmouseout = function () {
shadow.style.display="none";
bigImgBox.style.display="none";
}
smallImgBox.onmousemove = function (ev) {
var ev = ev || window.event ;
var x = ev.clientX - smallImgBox.offsetLeft - wrap.offsetLeft ;
var y = ev.clientY - smallImgBox.offsetTop -wrap.offsetTop;
var l = x-shadow.offsetWidth/2 ;
var t = y -shadow.offsetHeight/2 ;
if( l <=0 ) { l=0; }
else if( l >=smallImgBox.offsetWidth - shadow.offsetWidth ){
l = smallImgBox.offsetWidth - shadow.offsetWidth ;
}
if( t <=0 ){ t=0; }
else if( t>=smallImgBox.offsetHeight - shadow.offsetHeight ) {
t= smallImgBox.offsetHeight - shadow.offsetHeight;
}
shadow.style.left= l +"px";
shadow.style.top= t +"px";
var radioX = l / (smallImgBox.offsetWidth - shadow.offsetWidth);
var radioY = t / (smallImgBox.offsetHeight - shadow.offsetHeight) ;
document.title =radioX+" "+ radioY ;
bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";
/* var radioX = x / (smallImgBox.offsetWidth - shadow.offsetWidth) >=1? 1 : x / (smallImgBox.offsetWidth - shadow.offsetWidth) ;
var radioY = y / (smallImgBox.offsetHeight - shadow.offsetHeight) >=1? 1 : y / (smallImgBox.offsetHeight - shadow.offsetHeight);
document.title =radioX+" "+ radioY ;
bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";*/
};
};
</script>
</head>
<body>
<div class="wrap">
<div class="smallImg imgBox">
<img src="images/bimg.jpg" width="400" alt="chothes"/>
<div id="shadow"> </div>
</div>
<div class="bigImg imgBox">
<img src="images/bimg.jpg" width="800" alt="chothes"/>
</div>
</div>
</body>
</html>
2张图片-放大镜
缺点：素材需要一张小图，一张大图共计两张图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 2张图片- 放大镜</title>
<style>
/* reset css 样式重置 */
body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{
margin: 0;
padding: 0;
}
body{font-size:16px;}
table{border-collapse: collapse;}
select,textarea,input{outline:none; border: none; background:#fff; }
textarea{ resize: none; overflow: auto}
a{ text-decoration: none;}
li{ list-style: none; vertical-align: top}
img{ border:none; vertical-align: top}
/* end reset css */
.wrap{
position: relative;
height: 400px; width: 850px; margin:100px 0 0 400px ;
background: #ccc;
}
.wrap .smallImg, .wrap .bigImg{
position: absolute;
top: 0;
width: 400px; height: 400px; outline: 2px solid red;
overflow: hidden;
}
.wrap .smallImg{
left: 0;}
.wrap .bigImg{
left: 450px;
display: none;
}
.wrap .bigImg img{
position: absolute;
left: 0;
top: 0;
}
#shadow{
position: absolute;
left: 0;
top: 0;
display: none;
width: 100px;
height: 100px;background: rgba(0,0,255,0.5)}
</style>
<script>
window.onload = function(){
var wrap = document.getElementsByClassName("wrap")[0];
var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
var smallImg = smallImgBox.getElementsByTagName("img")[0];
var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
var bigImg = bigImgBox.getElementsByTagName("img")[0];
var shadow = document.getElementById("shadow")
smallImgBox.onmouseover = function () {
shadow.style.display="block";
bigImgBox.style.display="block";
};
smallImgBox.onmouseout = function () {
shadow.style.display="none";
bigImgBox.style.display="none";
}
smallImgBox.onmousemove = function (ev) {
var ev = ev || window.event ;
//鼠标在指定div里面的坐标:可视区里面鼠标坐标- div到文档边界的距离
/* var x = ev.clientX - shadow.offsetParent.offsetLeft -shadow.offsetParent.offsetParent.offsetLeft ;
var y = ev.clientY - shadow.offsetParent.offsetTop -shadow.offsetParent.offsetParent.offsetLeft;*/
var x = ev.clientX - smallImgBox.offsetLeft - wrap.offsetLeft ;
var y = ev.clientY - smallImgBox.offsetTop -wrap.offsetTop;
var l = x-shadow.offsetWidth/2 ;
var t = y -shadow.offsetHeight/2 ;
if( l <=0 ) { l=0; }
else if( l >=smallImgBox.offsetWidth - shadow.offsetWidth ){
l = smallImgBox.offsetWidth - shadow.offsetWidth ;
}
if( t <=0 ){ t=0; }
else if( t>=smallImgBox.offsetHeight - shadow.offsetHeight ) {
t=smallImgBox.offsetHeight - shadow.offsetHeight;
}
shadow.style.left= l +"px";
shadow.style.top= t +"px";
/* var radioX = l / (smallImgBox.offsetWidth - shadow.offsetWidth);
var radioY = t / (smallImgBox.offsetHeight - shadow.offsetHeight) ;
document.title =radioX+" "+ radioY ;
bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";*/
var radioX = x / (smallImgBox.offsetWidth - shadow.offsetWidth) >=1? 1 : x / (smallImgBox.offsetWidth - shadow.offsetWidth) ;
var radioY = y / (smallImgBox.offsetHeight - shadow.offsetHeight) >=1? 1 : y / (smallImgBox.offsetHeight - shadow.offsetHeight);
document.title =radioX+" "+ radioY ;
bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";
};
};
</script>
</head>
<body>
<div class="wrap">
<div class="smallImg imgBox">
<img src="images/simg.jpg" width="400" alt="chothes"/>
<div id="shadow"> </div>
</div>
<div class="bigImg imgBox">
<img src="images/bimg.jpg" width="800" height="800" alt="chothes"/>
</div>
</div>
</body>
</html>
3 大图作为背景图片 - 放大镜
缺点：需要知道背景图片数字大小不像前面两者能获取img样式宽高
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 2张图片- 放大镜</title>
<style>
/* reset css 样式重置 */
body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{
margin: 0;
padding: 0;
}
body{font-size:16px;}
table{border-collapse: collapse;}
select,textarea,input{outline:none; border: none; background:#fff; }
textarea{ resize: none; overflow: auto}
a{ text-decoration: none;}
li{ list-style: none; vertical-align: top}
img{ border:none; vertical-align: top}
/* end reset css */
.wrap{
position: relative;
height: 400px; width: 850px; margin:100px 0 0 400px ;
background: #ccc;
}
.wrap .smallImg, .wrap .bigImg{
position: absolute;
top: 0;
width: 400px; height: 400px; outline: 2px solid red;
overflow: hidden;
}
.wrap .smallImg{
left: 0;}
.wrap .bigImg{
left: 450px;
display: none;
background: url("images/bimg.jpg") no-repeat 0 0 ;
}
.wrap .bigImg img{
position: absolute;
left: 0;
top: 0;
}
#shadow{
position: absolute;
left: 0;
top: 0;
display: none;
width: 100px;
height: 100px;background: rgba(0,0,255,0.5)}
</style>
<script>
window.onload = function(){
var wrap = document.getElementsByClassName("wrap")[0];
var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
var smallImg = smallImgBox.getElementsByTagName("img")[0];
var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
var bigImg = bigImgBox.getElementsByTagName("img")[0];
var shadow = document.getElementById("shadow")
smallImgBox.onmouseover = function () {
shadow.style.display="block";
bigImgBox.style.display="block";
};
smallImgBox.onmouseout = function () {
shadow.style.display="none";
bigImgBox.style.display="none";
}
smallImgBox.onmousemove = function (ev) {
var ev = ev || window.event ;
//鼠标在指定div里面的坐标:可视区里面鼠标坐标- div到文档边界的距离
/* var x = ev.clientX - shadow.offsetParent.offsetLeft -shadow.offsetParent.offsetParent.offsetLeft ;
var y = ev.clientY - shadow.offsetParent.offsetTop -shadow.offsetParent.offsetParent.offsetLeft;*/
var x = ev.clientX - smallImgBox.offsetLeft - wrap.offsetLeft ;
var y = ev.clientY - smallImgBox.offsetTop -wrap.offsetTop;
var l = x-shadow.offsetWidth/2 ;
var t = y -shadow.offsetHeight/2 ;
if( l <=0 ) { l=0; }
else if( l >=smallImgBox.offsetWidth - shadow.offsetWidth ){
l = smallImgBox.offsetWidth - shadow.offsetWidth ;
}
if( t <=0 ){ t=0; }
else if( t>=smallImgBox.offsetHeight - shadow.offsetHeight ) {
t=smallImgBox.offsetHeight - shadow.offsetHeight;
}
shadow.style.left= l +"px";
shadow.style.top= t +"px";
/*
var radioX = x / (smallImgBox.offsetWidth - shadow.offsetWidth) >=1? 1 : x / (smallImgBox.offsetWidth - shadow.offsetWidth) ;
var radioY = y / (smallImgBox.offsetHeight - shadow.offsetHeight) >=1? 1 : y / (smallImgBox.offsetHeight - shadow.offsetHeight);
document.title =radioX+" "+ radioY ;
bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";
*/
var radioX = l / (smallImgBox.offsetWidth - shadow.offsetWidth);
var radioY = t / (smallImgBox.offsetHeight - shadow.offsetHeight) ;
document.title =radioX+" "+ radioY ;
/* 背景图片缺点： 这里需要知道背景图片具体大小-数字 800*800 */
bigImgBox.style.backgroundPositionX=-radioX*( 800- bigImgBox.offsetWidth) +"px";
bigImgBox.style.backgroundPositionY=-radioY*( 800- bigImgBox.offsetHeight) +"px";
};
};
</script>
</head>
<body>
<div class="wrap">
<div class="smallImg imgBox">
<img src="images/simg.jpg" width="400" alt="chothes"/>
<div id="shadow"> </div>
</div>
<div class="bigImg imgBox">
<!-- <img src="images/bimg.jpg" width="800" height="800" alt="chothes"/>-->
</div>
</div>
</body>
</html>
