js放大镜效果，超强注释

来源：互联网发布：mac系统偏好设置有个1 编辑：程序博客网时间：2024/06/04 18:51
下面是源码：
<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，右上角为11var 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>
0 0