HTML放大镜效果
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="/css/Magnifier.css"/>
<script src="../js/Magnifier.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="all">
<div id="small">
<img src="图片路径"/>
<div id="shadow"></div>
<div id="cover"></div>
</div>
<div id="big">
<img src="../images/big.jpg"/>
</div>
</div>
</body>
</html>
Css代码
*{
padding: 0px;
margin: 0px;
}
#all{
margin: 0 auto;
width: 1000px;
height: 800px;
border:1px solid blue ;
}
#small{
width: 310px;
height: 310px;
margin-top: 80px;
margin-left:100px;
border:1px solid red ;
position: relative;
float: left;
}
#small img{
/*border:1px solid gray ;*/
}
#shadow{
width: 100px;
height: 100px;
background-color: black;
opacity: .2;
position: absolute;
top: 0px;
left: 0px;
display: none;
cursor: move;
}
#cover{
width: 100%;
height:100%;
z-index: 10;
position: absolute;
left: 0px;
top: 0px;
cursor: move;
}
#big{
width: 310px;
height: 310px;
position: relative;
overflow: hidden;
border:1px solid yellow ;
display: none;
}
#big img{
position: absolute;
top: 0px;
left: 0px;
}
Js代码
window.onload=function(){
small=document.getElementById("small");
shadow=document.getElementById("shadow");
shadowWH=shadow.style.width?shadow.style.width:document.defaultView.getComputedStyle(shadow,null).width;
shadowWH=parseInt(shadowWH);
smallW=small.style.width?small.style.width:document.defaultView.getComputedStyle(small,null).width;
smallW=parseInt(smallW);
// smallML=small.style.marginLeft?small.style.marginLeft:document.defaultView.getComputedStyle(small,null).marginLeft;
// smallML=parseInt(smallML);
smallMT=small.style.marginTop?small.style.marginTop:document.defaultView.getComputedStyle(small,null).marginTop;
smallMT=parseInt(smallMT);
big=document.getElementById("big");
bigW=big.style.width?big.style.width:document.defaultView.getComputedStyle(big,null).width;
bigW=parseInt(bigW);
// console.log(smallW);
// console.log(shadowWH)
//console.log("smallML="+smallML);
//console.log("smallMT="+smallMT);
//console.log("bigw="+bigW);
bigImg=big.getElementsByTagName("img")[0];
move();
}
function move(){
small.onmouseover=function(){
shadow.style.display="block";
big.style.display="block";
change(event);
}
small.onmouseout=function(){
shadow.style.display="none";
big.style.display="none";
}
small.onmousemove=function(){
change(event);
}
}
function change(event){
var evt=event?event:window.event;
// var moveL=evt.pageX;
// var moveT=evt.pageY;
var moveL=evt.layerX-shadowWH/2;
var moveT=evt.layerY-shadowWH/2;
// console.log("moveL="+moveL+": moveT="+moveT);
if(moveL<0){
moveL=0;
}
if(moveL>smallW-shadowWH){
moveL=smallW-shadowWH;
}
if(moveT<