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--

....单靠这很好，它可以正常工作。因为您可以将鼠标悬停在下一个缩略图上，并且浮动图像会相应更改，同时保持宽高比。但是，如果缩略图位于右侧，则浮动图像位于屏幕的右边缘，并且无法看到：是否可以通过任何方式在JS代码中放置“块”，以便缩略图图像比内容的边缘（屏幕边缘或包含DV图层的边缘）更靠近内容边缘，而不是在鼠标指针的左侧显示图像？ 下一个问题：如果我自己打开页面，此代码将正常工作-但我的网站设计将通过AJAX调用该页面以在DIV层中打开。这会破坏代码，然后将不起作用。我编写的其他脚本也发生了这种情况：本身可以很好地工作，但是通过AJAX加载请求放入，失败了。如何解决呢？ 谢谢。     

解决方法

        我已经修改了脚本，以便当鼠标离右侧太远时图像将切换到左侧：

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;
}