js简单放大镜

来源：互联网发布：淘宝怎么看行情数据编辑：程序博客网时间：2024/06/06 01:32

制作类似淘宝上面的放大镜，需要一张小图，一张大图。效果如下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>放大镜</title><style>body,div,img{margin:0;padding: 0}#main{width: 300px;height: 189px;border:1px solid #666;position: relative;margin:50px auto;}#big{position: absolute;left:320px;top:0px;width:300px;height:189px;border:1px solid #666;overflow: hidden;display: none}#mark{width:50px;height: 50px;background: #ccc;opacity: 0.5;position: absolute;left:0;top:0;display: none}</style></head><body><div id="main"><!-- 小图 --><div id="small"><img src="imgs/ktm_small.jpg"><!-- 镜头-遮罩层 --><div id="mark"></div></div><!-- 大图 --><div id="big"><img src="imgs/ktm_big.jpg"></div></div><script>var small = document.getElementById('small');//调图divvar big   = document.getElementById('big');//大图divvar mark  = document.getElementById('mark');//遮罩层//1、给小图监视移入、移出事件small.onmouseover = function(){mark.style.display = 'block';big.style.display  = 'block';}small.onmouseout = function(){mark.style.display = 'none';big.style.display  = 'none';}//2、监视小图是否发生鼠标移动行为small.onmousemove = function(e){//鼠标移动时，通常获得鼠标的坐标,通过事件对象获得//这里兼容浏览器var ev = e || window.event;var x  = ev.clientX - this.parentNode.offsetLeft - mark.clientWidth/2;//mark与small的左间距var y  = ev.clientY - this.parentNode.offsetTop - mark.clientHeight/2;//mark与small的上间距//2.1防止镜头出界if(x<=0){x = 0;//拉回来固定在原点}if(y<=0){y = 0;}if(x>=small.offsetWidth - mark.offsetWidth){x = small.offsetWidth - mark.offsetWidth;}if(y>=small.offsetHeight - mark.offsetHeight){y = small.offsetHeight - mark.offsetHeight;}//3、计算大图移动的比例,让大图随遮罩层一起动var bigImg  = big.getElementsByTagName("img")[0];//大图var bigLeft = mark.offsetLeft/(small.offsetWidth - mark.offsetWidth)*(bigImg.offsetWidth - big.offsetWidth);var bigTop = mark.offsetTop/(small.offsetHeight - mark.offsetHeight)*(bigImg.offsetHeight - big.offsetHeight);//3.1、大图移动和镜头是反向的  bigImg.style.position = 'absolute';bigImg.style.left = -bigLeft+'px';bigImg.style.top = -bigTop+'px';mark.style.left = x+'px';mark.style.top = y+'px';}</script></body></html>

如果对于HTML DOM的元素对象不清楚，可以看下图，如图

阅读全文

0 0