最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js放大镜放大购物图片效果
时间:2017-02-04 编辑:简简单单 来源:一聚教程网
图片放大镜效果,供大家参考,具体内容如下
一难点:不让黄盒子出界
二难点:让大盒子相应移动(比例)
代码如下 | 复制代码 |
*{ margin: 0; padding: 0; } .box{ margin: 100px; position: relative; } .small{ width: 350px; height: 350px; border: 1px solid #999; position: relative; } .select{ display: none; width: 100px; height: 100px; background: rgba(255,255,0,0.4); position: absolute; left: 0; top: 0; cursor: move;
} .big{ display: none; position: absolute; left: 360px; top: 0; width: 450px; height: 450px; border: 1px solid #ccc; overflow: hidden; } .big img{ position: absolute; left: 0; top: 0; }
var smallbox = document.getElementById('smallbox'); var bigbox = document.getElementById('bigbox'); var mask = document.getElementById('mask'); var bigImg = bigbox.children[0]; smallbox.onmouseover = function(){ mask.style.display = "block"; bigbox.style.display = "block"; } smallbox.onmouseout = function(){ mask.style.display = "none"; bigbox.style.display = "none"; }
smallbox.onmousemove = function(event){ var event = event || window.event;
var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2; var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2; //不让黄盒子出界 if(x <0){ x=0; }else if(x > smallbox.offsetWidth - mask.offsetWidth){ x = smallbox.offsetWidth - mask.offsetWidth; }
if(y<0) { y=0; }else if(y > smallbox.offsetHeight - mask.offsetHeight){ y = smallbox.offsetHeight - mask.offsetHeight; } mask.style.left = x + "px"; mask.style.top = y + "px";
bigImg.style.left = -x/smallbox.offsetWidth * bigbox.offsetWidth + "px"; //注意是-x bigImg.style.top = -y/smallbox.offsetHeight * bigbox.offsetHeight + "px"; }
|