您的位置：首页 > Web前端 > JavaScript
js放大镜效果，超强注释

2015-12-25 23:27 651 查看
下面是源码：
<style type="text/css">

#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }

#div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width: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; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
</style>
<script type="text/javascript">

//根据类名选择元素，参数：父元素，子元素的类名
function getByClass(oparent,sclass)
{
var ele=oparent.getElementsByTagName('*');//所有标签元素
var aTmp=[];//存放结果元素
var i=0;
for(i=0;i<ele.length;i++)//遍历所有标签元素
{
if(ele[i].className==sclass)//盖子元素的类为sclass的元素
{
aTmp.push(ele[i]);//数组添加元素
}
}
return aTmp;
}
window.onload=function()
{
var div=document.getElementById("div1");//得到div元素
var mark=getByClass(div,'mark')[0];//左边图片的遮罩层,覆盖了整个左边区域
var smllpic=getByClass(div,'small_pic')[0];//左边小区域
var float=getByClass(div,'float_layer')[0];//左边小阴影

var obig=getByClass(div,'big_pic')[0];//右边大图片区域
var oImg=obig.getElementsByTagName('img')[0];//右边大图片

smllpic.onmouseover=function()
{
obig.style.display='block';//右边大图片显示
float.style.display='block'; //鼠标移入小阴影显示
}
smllpic.onmouseout=function()
{
obig.style.display='none';
float.style.display='none';
}
smllpic.onmousemove=function(ev)
{
var e=ev || event;//排除浏览器兼容问题
document.title=e.clientX+"-"+e.clientY;
//鼠标的坐标，最小显示为14,14，将smllpic改为div，就可以看到，屏幕左上角0,0，div1左上角9,9,small_pic左上角14，14
//offsetLeft表示对象距父元素左边的像素,offsetTop表示当前对象距离父元素上边的像素
//将e.clientX-smllpic.offsetLeft-div.offsetLeft即可表示鼠标真正所指像素，而-float.offsetWidth/2是为了让鼠标能指向图片居中
var l=e.clientX-smllpic.offsetLeft-div.offsetLeft-float.offsetWidth/2;
var t=e.clientY-smllpic.offsetTop-div.offsetTop-float.offsetHeight/2;

//不让边框出去
if(l<0)//不让左边出去
{
l=0;
}else if(l>mark.offsetWidth-float.offsetWidth)//不让右边出去
{
l=mark.offsetWidth-float.offsetWidth;
}
if(t<0)//不让上边出去
{
t=0;
}else if(t>mark.offsetHeight-float.offsetHeight)//不让下边出去
{
t=mark.offsetHeight-float.offsetHeight;
}

float.style.top=t+'px';//top要小写
float.style.left=l+'px';
//document.title=l+"--"+t;

//l的移动范围是从0到mark.offsetWidth-float.offsetWidth，拿l/范围表示此时所在像素占整个图片的比例,左上角为00，右上角为11
var percntX=l/(mark.offsetWidth-float.offsetWidth);
var percntY=t/(mark.offsetHeight-float.offsetHeight);
document.title=percntX+"--"+percntY;

//右边区域中图片能移动的举例范围是0到obig.offsetWidth-oImg.offsetWidth，那百分比*距离就是对应像素的位置
oImg.style.left=percntX*(obig.offsetWidth-oImg.offsetWidth)+'px';
oImg.style.top=percntY*(obig.offsetHeight-oImg.offsetHeight)+'px';

}
}
</script>
</head>

<body>

<div id="div1">

<!--左边小图区域-->
<div class="small_pic">
<span class="mark"></span><!--左边图片的遮罩层-->
<span class="float_layer"></span><!--右边图片的显示区域-->
<img src="small.png" alt="妙味课堂 - 放大镜图片一" longdesc="http://www.miaov.com" />
</div>

<!--右边大图区域-->
<div class="big_pic">
<img src="big.png" alt="妙味课堂 - 放大镜图片二" longdesc="http://www.miaov.com" />
</div>

</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航