// JavaScript Document window.onload = function() { /* var oDiv = document.getElementById('div1');///原图框 var oShow = oDiv.getElementsByTagName('div')[0];///等大透明框,范围 var oSpan = oDiv.getElementsByTagName('span')[0];///半透明正方形 var oImg = document.getElementById('img1');////显示图 */ var oDiv = document.getElementById('View_imgID');///原图框 var oShow = oDiv.getElementsByTagName('div')[0];///等大透明框,范围 var oSpan = oDiv.getElementsByTagName('span')[0];///半透明正方形 var oImg = document.getElementById('view_BigID');////显示图 oShow.onmouseover = function() { oSpan.style.display = 'block'; oImg.parentNode.style.display = 'block'; }; oShow.onmouseout = function() { oSpan.style.display = 'none'; oImg.parentNode.style.display = 'none'; }; oShow.onmousemove = function(ev) { var oEvent = ev || event; var x = oEvent.clientX - oDiv.offsetLeft - oSpan.offsetWidth / 2; ///$(".orga_locat").html("坐标:"+x+"左边:"+oDiv.offsetLeft+"半透明宽度:"+oSpan.offsetWidth); var y = getScrollTop()+oEvent.clientY - oDiv.offsetTop - oSpan.offsetHeight / 2; if (x < 0) { x = 0; } else if (x > oShow.offsetWidth - oSpan.offsetWidth) { x = oShow.offsetWidth - oSpan.offsetWidth; } if (y < 0) { y = 0; } else if (y > oShow.offsetHeight - oSpan.offsetHeight) { y = oShow.offsetHeight - oSpan.offsetHeight } oSpan.style.left = x + 'px'; oSpan.style.top = y + 'px'; var percentX = x / (oShow.offsetWidth - oSpan.offsetWidth); var percentY = y / (oShow.offsetHeight - oSpan.offsetHeight); var oImgparent = oImg.parentNode; oImg.style.left = -percentX * (oImg.offsetWidth - oImgparent.offsetWidth) + 'px'; oImg.style.top = -percentY * (oImg.offsetHeight - oImgparent.offsetHeight) + 'px'; }; }; function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=document.body.scrollTop; } return scrollTop; }