-------------------------------------
一,布局
一个大的div,包括下面:
左边是小图div,小图中有可移动的面板.右边是大图div,
学到的内容:fiter 滤镜 这里; overflow 这里
offsetLeft(HTML DOM 元素对象) 这里
<style type="text/css"> #div1{ 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; } #div1 .small_pic{ 200px; height: 200px; background: #eee; position: relative; } #div1 .float_layer{ 50px; height: 50px; border:1px solid #000; background: #fff; filter: alpha(opacity:30); //滤镜 opacity: 0.3; position: absolute; top: 0px; left: 0px; display: none; } #div1 .mark{ 100%; height:100%; position: absolute; z-index: 2; left: 0px; top: 0px; background: red; filter: alpha(opacity:0); opacity: 0; } #div1 .big_pic{ position: absolute; top: -1px; left: 215px; 250px; height: 250px; overflow: hidden; border: 2px solid #ccc; display: none; } #div1 .big_pic img{ position: absolute; top: 0px; left: 0px; } </style> <body> <div id="div1"> <div class="small_pic"> <span class="mark"></span> <span class="float_layer"></span> <img src="images/small.png" alt="放大图片1"> </div> <div class="big_pic"> <img src="images/big.png" alt="放大图片2"> </div> </div> </body>
-------------------------------------
二,JS操作-获得元素
写获得class函数
function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aTmp=[]; var i=0; for(i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aTmp.push(aEle[i]); } } return aTmp; }
-------------------------------------
三,控制大图及面板的出现和隐藏.
mouseover mouseout
oMark.onmouseover=function() { oFloat.style.display='block'; oBig.style.display='block'; }; oMark.onmouseout=function(){ oFloat.style.display='none'; oBig.style.display='none'; };
-------------------------------------
四,让面板随着鼠标移动
mousemove
鼠标位置
下面是确定面板的left
var oEvent=ev||event; var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; oFloat.style.left=l+'px'; oFloat.style.top=t+'px';
-------------------------------------
五,控制面板的可移动范围
判断 超出时强制为某值
if(l<-5) { l=-5; } else if (l>oMark.offsetWidth-oFloat.offsetWidth+5){l=oMark.offsetWidth-oFloat.offsetWidth+5;}//参考面板left的确定 这里 if(t<-5) { t=-5; }
-------------------------------------
六,大图动起来
按照一个比例
面板在小图里可以移动范围除以小图的宽度,
var tempX=l/(oMark.offsetWidth-oFloat.offsetWidth); var tempY=t/(oMark.offsetHeight-oFloat.offsetHeight); document.title=tempX; oImg.style.left=-tempX*(oImg.offsetWidth-oBig.offsetWidth)+'px'; oImg.style.top=-tempY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
下面是效果图.请把鼠标放在图片上
-------------------------------------
七,代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style type="text/css">
#div1{
200px;
height: 200px;
padding: 5px;
border: 1px solid #ccc;
position: relative;
}
#div1 .small_pic{
200px;
height: 200px;
background: #eee;
position: relative;
}
#div1 .float_layer{
50px;
height: 50px;
border:1px solid #000;
background: #fff;
filter: alpha(opacity:30);
opacity: 0.3;
position: absolute;
top: 0px;
left: 0px;
display: none;
}
#div1 .mark{
100%;
height:100%;
position: absolute;
z-index: 2;
left: 0px;
top: 0px;
background: red;
filter: alpha(opacity:0);
opacity: 0;
}
#div1 .big_pic{
position: absolute;
top: -1px;
left: 215px;
250px;
height: 250px;
overflow: hidden;
border: 2px solid #ccc;
display: none;
}
#div1 .big_pic img{
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aTmp=[];
var i=0;
for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aTmp.push(aEle[i]);
}
}
return aTmp;
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oMark=getByClass(oDiv, 'mark')[0];
var oFloat=getByClass(oDiv,'float_layer')[0];
var oBig=getByClass(oDiv,'big_pic')[0];
var oSmall=getByClass(oDiv,'small_pic')[0];
var oImg=oBig.getElementsByTagName('img')[0];
oMark.onmouseover=function()
{
oFloat.style.display='block';
oBig.style.display='block';
};
oMark.onmouseout=function(){
oFloat.style.display='none';
oBig.style.display='none';
};
oMark.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
if(l<-5)
{
l=-5;
}
else if (l>oMark.offsetWidth-oFloat.offsetWidth+5){l=oMark.offsetWidth-oFloat.offsetWidth+5;}
if(t<-5)
{
t=-5;
}
else if (t>oMark.offsetHeight-oFloat.offsetHeight+5){t=oMark.offsetHeight-oFloat.offsetHeight+5;}
oFloat.style.left=l+'px';
oFloat.style.top=t+'px';
var tempX=l/(oMark.offsetWidth-oFloat.offsetWidth);
var tempY=t/(oMark.offsetHeight-oFloat.offsetHeight);
document.title=tempX;
oImg.style.left=-tempX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-tempY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
}
};
</script>
</head>
<body>
<div id="div1">
<div class="small_pic">
<span class="mark"></span>
<span class="float_layer"></span>
<img src="images/small.png" alt="放大图片1">
</div>
<div class="big_pic">
<img src="images/big.png" alt="放大图片2">
</div>
</div>
</body>
</html>