鼠标经过缩略图出现原大图片提示层

人气：　来源：网络　作者：佚名　所属栏目：图片类　[切换到繁體中文]

介绍：网页布局时，图片可能不能原大展示给网友，用这个JS方便多了。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_鼠标经过缩略图出现原大图片提示层</title>
<style><!--body,td{font-size: 12px;}--></style>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
</style>
</head>
<body bgcolor="" 无>
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
	<img src="http://www.zzsc.org/texiao/zzsc_demo/33.jpg">
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
	var ts = gg[i];
	ts.onmousemove = function(event){
		event = event || window.event;
		ei.style.display = "block";
		ei.innerHTML = '<img src="' + this.src + '" />';
		ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
		ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
	}
	ts.onmouseout = function(){
		ei.innerHTML = "";
		ei.style.display = "none";
	}
	ts.onclick = function(){
		window.open( this.src );
	}
}
</script>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：无
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
<img src="http://www.zzsc.org/texiao/zzsc_demo/33.jpg">
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
var ts = gg[i];
ts.onmousemove = function(event){
  event = event || window.event;
  ei.style.display = "block";
  ei.innerHTML = '<img src="' + this.src + '" />';
  ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
  ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function(){
  ei.innerHTML = "";
  ei.style.display = "none";
}
ts.onclick = function(){
  window.open( this.src );
}
}
</script>