Html+Css+Js实现放⼤镜功能（完整代码+详解）
⼀，问题描诉
通过将⿏标指向指定的图⽚，将⿏标移动到图⽚时，显⽰⼀个透明的⼩区域，然后将⼩区域的部分放⼤，查看细节。放⼤过程中必须满⾜⼏个条件：
1.⿏标移动时，透明的⼩区域也跟着移动，并且透明的⼩区域必须在指定的图⽚内，不得出该图⽚的范围。
2.放⼤的区域要按照⼀定的⽐例展⽰出来
⼆，难点分析
2.1难点列出
1.⿏标在图⽚区域时，透明⼩区域出现，放⼤的区域出现
2.⿏标移出图⽚时，透明⼩区域⼩时，放⼤区域消失
3.透明⼩区域随着⿏标移动
2.2 难点解决关键（对应解决回答）
1.通过⿏标onmourseover监听⿏标的略过图⽚，改变透明⼩区域和放⼤区域的display，置为block
2.通过⿏标onmourseover监听⿏标的略过图⽚，改变透明⼩区域和放⼤区域的display，置为none
3.通过event对象获取⿏标的当前坐标位置，即⽅法event.layerX,event.layer.Y，然后通过放⼊⿏标事件onmoursemove监听，不停的将透明⼩区域的top和left置为event.layerX,event.layer.Y的值
三，详细代码
3.1 代码结构
3.2 具体代码
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="../images/small.jpg"/>
<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代码
ElementById("small");
实现特效的代码js
ElementById("shadow");
shadowWH=shadow.style.width?shadow.style.width:ComputedStyle(shadow,null).width;
shadowWH=parseInt(shadowWH);
smallW=small.style.width?small.style.width:ComputedStyle(small,null).width;
smallW=parseInt(smallW);
// smallML=small.style.marginLeft?small.style.marginLeft:ComputedStyle(small,null).marginLeft; // smallML=parseInt(smallML);
smallMT=small.style.marginTop?small.style.marginTop:ComputedStyle(small,null).marginTop; smallMT=parseInt(smallMT);
ElementById("big");
bigW=big.style.width?big.style.width:ComputedStyle(big,null).width;
bigW=parseInt(bigW);
// console.log(smallW);
// console.log(shadowWH)
//console.log("smallML="+smallML);
//console.log("smallMT="+smallMT);
//console.log("bigw="+bigW);
ElementsByTagName("img")[0];
move();
}
function move(){
shadow.style.display="block";
big.style.display="block";
change(event);
}
shadow.style.display="none";
big.style.display="none";
}
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<0){
moveT=0;
}
if(moveT>smallW-shadowWH){
moveT=smallW-shadowWH;
}
shadow.style.left=moveL+"px";
p=moveT+"px";
/**
* 图⽚放⼤
*/
// big.style.left=smallW+smallML+50+"px";
big.style.left=50+"px";
p=smallMT+"px";
bigImgW=bigImg.offsetWidth;
// console.log("bigImgW="+bigImgW);
// console.log("bigImgW="+bigImgW); var scale=bigImgW/bigW;
p=-moveT*scale+"px"; bigImg.style.left=-moveL*scale+"px"; }
四，效果演⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。