我有一个 javascript 代码,它将使鼠标指针旁边出现一个浮动图像(通过使用 php,它显示了鼠标悬停在上面的图像,但是全尺寸,因为页面上的图像本身被缩小了少量)。但是,如果图像在页面的左侧是可以的,但如果图像在右侧,则会出现问题。
编码:
<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 加载请求输入却失败了。如何解决?
谢谢。