核心代码收集于网络（IE6,7,8,Firefox/3.6.11和TT4.8下测试通过）.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
function CreatePopup() {
var SetElementStyles = function( element, styleDict ) {
var style = element.style ;
for ( var styleName in styleDict )style[ styleName ] = styleDict[ styleName ] ;
}
var eDiv = document.createElement( 'div' );
SetElementStyles( eDiv, { 'position': 'absolute', 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'zIndex': 1000, 'display' : 'none', 'overflow' : 'hidden' } ) ;
eDiv.body = eDiv ;
var opened = false ;
var setOpened = function( b ) {
opened = b;
}
var getOpened = function() {
return opened ;
}
var getCoordinates = function( oElement ) {
var coordinates = {x:0,y:0} ;
while( oElement ) {
coordinates.x += oElement.offsetLeft ;
coordinates.y += oElement.offsetTop ;
oElement = oElement.offsetParent ;
}
return coordinates ;
}
return {
htmlTxt : '',
document : eDiv,
isOpen : getOpened(),
isShow : false,
hide : function() {
SetElementStyles( eDiv, { 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'display' : 'none' } ) ;
eDiv.innerHTML = '' ;
this.isShow = false ;
},
show : function( iX, iY, iWidth, iHeight, oElement ) {
if (!getOpened()) { document.body.appendChild( eDiv ) ; setOpened( true ) ; } ;
this.htmlTxt = eDiv.innerHTML ;
if (this.isShow) { this.hide() ; } ;
eDiv.innerHTML = this.htmlTxt ;
var coordinates = getCoordinates ( oElement ) ;
eDiv.style.top = ( iX + coordinates.x ) + 'px' ;
eDiv.style.left = ( iY + coordinates.y ) + 'px' ;
eDiv.style.width = iWidth + 'px' ;
eDiv.style.height = iHeight + 'px' ;
eDiv.style.display = 'block' ;
this.isShow = true ;
}
}
}
var oPopup;//控制图片的展示
if (!window.createPopup) {
oPopup=CreatePopup();
}
else{
oPopup = window.createPopup();
}
function FillOutImage(imgUrl,eventTag) {
with (oPopup.document.body) {
style.backgroundColor = "lightyellow";
style.border = "solid black 1px";
innerHTML = "<img src='" + imgUrl + "' width='100%' height='100%' />";
}
var event = eventTag||window.event;
oPopup.show(event.clientX + 80, event.clientY+10, 300, 250);//窗体的大小
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="imgages/bg_cm.jpg" border="0" width="100" height="100" onmousemove="FillOutImage('imgages/bg_cm.jpg',event)" onmouseout="oPopup.hide();" alt=""/>
</div>
<div id="divHere"></div>
</form>
</body>
</html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。