一,问题描诉
通过将鼠标指向指定的图片,将鼠标移动到图片时,显示一个透明的小区域,然后将小区域的部分放大,查看细节。放大过程中必须满足几个条件:
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代码
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<0){
moveT=0;
}
if(moveT>smallW-shadowWH){
moveT=smallW-shadowWH;
}
shadow.style.left=moveL+"px";
shadow.style.top=moveT+"px";
/**
* 图片放大
*/
// big.style.left=smallW+smallML+50+"px";
big.style.left=50+"px";
big.style.top=smallMT+"px";
bigImgW=bigImg.offsetWidth;
// console.log("bigImgW="+bigImgW);
var scale=bigImgW/bigW;
bigImg.style.top=-moveT*scale+"px";
bigImg.style.left=-moveL*scale+"px";
}