Javascript和AJAX：在光标旁边浮动图像-问题
||
我有一个javascript代码，它将使浮动图像显示在鼠标指针旁边（通过使用php，它显示mosue悬停在上方的图像，但是由于页面上图像的尺寸已缩小，因此全尺寸显示）位）。但是，如果图像位于页面左侧可以，但是如果图像位于右侧，则存在问题。
代码：
<script>
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + \"px\";
d.style.top = (cY+10) + \"px\";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = \"none\";
}
function ShowContent(d,i) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = \"block\";
$(d).setHTML (\'<img src=\"\'+i\'\" />\');
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == \"none\") { dd.style.display = \"block\"; }
else { dd.style.display = \"none\"; }
}
//-->
</script>
<a onmousemove=\"ShowContent(\'FloatingImage\',\'image.jpg\'); return true;\" onmouseover=\"ShowContent(\'FloatingImage\',\'image.jpg\'); return true;\" onmouseout=\"HideContent(\'FloatingImage\',\'image.jpg\'); return true;\" href=\"javascript:ShowContent(\'FloatingImage\',\'image.jpg\')\">standard html</a>
<div
id=\"FloatingImage\"
style=\"display:none;
position:absolute;
border-style: solid;
background-color: white;
padding: 5px;
z-index:+1\">
<img id=\"MouseImage\" name=\"MouseImage\" src=\"LR-10.jpg\" />
</div>
--end code--
没有找到相关结果
已邀请:
1 个回复
肉簧咸缮
var cX = 0, cY = 0, rX = 0, rY = 0, vW; function UpdateCursorPosition(e) { cX = e.pageX; cY = e.pageY; } function UpdateCursorPositionDocAll(e) { cX = event.clientX; cY = event.clientY; } if (document.all) { document.onmousemove = UpdateCursorPositionDocAll; } else { document.onmousemove = UpdateCursorPosition; } function AssignPosition(d) { if (self.pageYOffset) { rX = self.pageXOffset; rY = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { rX = document.documentElement.scrollLeft; rY = document.documentElement.scrollTop; } else if (document.body) { rX = document.body.scrollLeft; rY = document.body.scrollTop; } if (document.all) { cX += rX; cY += rY; } var oW = d.offsetWidth; if (cX + 10 + oW > vW) d.style.left = (cX - 10 - oW) + \'px\'; else d.style.left = (cX+10) + \'px\'; d.style.top = (cY+10) + \'px\'; } function HideContent(d) { if (d.length < 1) return; document.getElementById(d).style.display = \'none\'; } function ShowContent(d,i) { vW = ViewportWidth(); if (d.length < 1) return; var dd = document.getElementById(d); AssignPosition(dd); dd.style.display = \'block\'; document.getElementById(d).innerHTML = \'<img src=\"\'+i+\'\" />\'; } function ReverseContentDisplay(d) { if (d.length < 1) return; var dd = document.getElementById(d); AssignPosition(dd); dd.style.display = (dd.style.display==\'none\')? \'block\' : \'none\'; } function ViewportWidth() { if (self.innerWidth) return self.innerWidth; else if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth; else if (document.body) return document.body.clientWidth; }