当前位置：懒人建站 > 网页特效 > 一张图片实现鼠标滑过缩略图显示大图片JS代码

一张图片实现鼠标滑过缩略图显示大图片JS代码

作者：佳明妈来源：懒人建站 2009-12-15 人气：

利用一张图片产生缩略图，鼠标滑过缩略图显示大图片的JS代码。宽高修改样式即可。代码简单，几行DIV和几句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">
<title>一张图片实现鼠标滑过缩略图显示大图片JS代码_懒人建站</title>
<meta name="keywords" content="HTML+CSS模板,HTML+CSS教程,HTML+CSS导航菜单,FLASH焦点图,网页特效" />
<meta name="description" content="懒人建站为您提供-HTML+CSS模板，HTML+CSS教程，JS广告代码，HTML+CSS导航菜单，FLASH焦点图片，国外网页设计欣赏与模板和CSS技巧。" />
<head>
<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>
<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
	<img src="http://www.51xuediannao.com/uploads/soft/texiao/img2img/img2img.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>
</body>
</html>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>懒人建站为您提供-各种bolg制作技巧，HTML技巧，CSS技巧和CMS使用技巧</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>

利用一张图片产生缩略图，鼠标滑过缩略图显示大图片的JS代码。

替换<img src="http://www.51xuediannao.com/uploads/soft/texiao/img2img/img2img.jpg">中的图片即可。宽高修改样式即可。

代码简单，几行DIV和几句JS脚本。