<!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" οnmοuseοut="hiddenPic('Layer1');" οnmοusemοve="showPic('Layer1',this.href,300,300,event);">鼠标过来,我在这里</a>
</BODY>
</HTML>
js鼠标移动到图片上浮动层显示图片
最新推荐文章于 2022-04-28 16:50:11 发布