js鼠标移动到图片上浮动层显示图片

来源：互联网发布：淘宝刷买家等级编辑：程序博客网时间：2024/04/28 21:04

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>js鼠标移动到图片上浮动层显示图片</TITLE>
<script type="text/javascript">
//判断图片后缀名
String.prototype.isPicture = function(){
   var strFilter = ".jpeg|.gif|.jpg|.png|.bmp|.pic";
   if(this.indexOf(".") > -1){
       var p = this.lastIndexOf(".");
       var strPostfix = this.substring(p,this.length) + "|";
       strPostfix = strPostfix.toLowerCase();
       if(strFilter.indexOf(strPostfix) > -1){
           return true;
       }
   }
   return false;
}
//显示图片
function showPic(divId,url,width,height,event){
   if(url.isPicture()==false) return;
   var evt = event || window.event;
   var x = evt.clientX;
   var y = evt.clientY;
   document.getElementById(divId).style.left = x + "px";
   document.getElementById(divId).style.top = y + "px";
   document.getElementById(divId).innerHTML = "<img src=/""+url+"/" width=/""+width+"/" height=/""+height+"/">";
   document.getElementById(divId).style.display = "block";
}
function hiddenPic(divId){
   document.getElementById(divId).innerHTML = "";
   document.getElementById(divId).style.display = "none";
}
</script>
</HEAD>

<BODY>
<div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>
<a href="图片地址.jpg" onmouseout="hiddenPic('Layer1');" onmousemove="showPic('Layer1',this.href,300,300,event);">鼠标过来,我在这里</a>
</BODY>
</HTML>