php 放大镜代码,原生javascript实现放大镜效果

html部分：

     

css部分：

* { padding:0px; margin:0px;}

.main { margin:50px;}

.xiaotu, .datu { float:left; position:relative;}

.xiaotu img { width:500px;}

.yidong { width:100px; height:100px; background:#333; filter:alpha(opacity=50); opacity:0.5; position:absolute; left:0px; top:0px; display:none;}

.datu { width:320px; height:320px; overflow:hidden; display:none;}

.datu img { position:absolute;}

.clear { height:0px; clear:both;}

js部分：

window.onload = function(){

var yidong = document.getElementById('yidong');

var xiaotu = document.getElementById('xiaotu');

var datu = document.getElementById('datu');

var img1 = document.getElementById('img1');

var mouseX = 0;

var mouseY = 0;

document.onmousemove = function(e){

//获取鼠标当前位置

e = e||window.event;

mouseX = e.clientX;

mouseY = e.clientY;

//显示移动的块及大图在规定的范围内，超出范围隐藏

if(mouseX>xiaotu.offsetLeft&&mouseXxiaotu.offsetTop&&mouseY

yidong.style.display = datu.style.display = 'block';

var a = yidong.offsetWidth/2;

var b = yidong.offsetHeight/2;

if(mouseX>xiaotu.offsetLeft+a&&mouseXxiaotu.offsetTop+b&&mouseY

yidong.style.left = mouseX - xiaotu.offsetLeft - a + 'px';

yidong.style.top = mouseY - xiaotu.offsetTop - b + 'px';

}else if(mouseX>xiaotu.offsetLeft&&mouseXxiaotu.offsetTop+b&&mouseY

yidong.style.left = 0;

yidong.style.top = mouseY - xiaotu.offsetTop - b + 'px';

}else if(mouseX>xiaotu.offsetLeft+xiaotu.offsetWidth-a&&mouseXxiaotu.offsetTop+b&&mouseY

yidong.style.left = xiaotu.offsetWidth - a*2 + 'px';

yidong.style.top = mouseY - xiaotu.offsetTop - b + 'px';

}else if(mouseY>xiaotu.offsetTop&&mouseYxiaotu.offsetLeft+a&&mouseX

yidong.style.left = mouseX - xiaotu.offsetLeft - a + 'px';

yidong.style.top = 0;

}else if(mouseY>xiaotu.offsetTop+xiaotu.offsetHeight-b&&mouseYxiaotu.offsetLeft+a&&mouseX

yidong.style.left = mouseX - xiaotu.offsetLeft - a + 'px';

yidong.style.top = xiaotu.offsetHeight - b*2 + 'px';

}

//改变大图位置

var i = img1.offsetWidth/xiaotu.offsetWidth;

img1.style.left = -yidong.offsetLeft * i + 'px';

img1.style.top = -yidong.offsetTop * i + 'px';

}else{

yidong.style.display = datu.style.display = 'none';

}

}

}