JS实现图片高亮展示效果实例
本文实例讲述了JS实现图片高亮展示效果的方法。分享给大家供大家参考，具体如下：
昨天朋友让我帮着做个图片高亮展示的效果，虽然不难，不过满有创意的：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>name</title>
<styletype="text/css">
*{}{margin:0;padding:0;}
aimg{}{border:none;}
#imagesBox{}{width:165px;height:110px;position:relative;left:100px;top:100px;z-index:1;border:1pxsolidblack;background-color:white;}
#trans{}{width:165px;height:110px;position:absolute;left:0;top:0;z-index:2;display:none;opacity:0.5;filter:alpha(opacity=50);background-color:black;}
#imagesBoxli{}{width:55px;height:55px;float:left;overflow:hidden;}
#imagesBoxlia,#imagesBoxliimg{}{width:55px;height:55px;display:block;cursor:pointer;}
#imagesBoxliimg{}{position:relative;}
#imagesBoxstrong{}{position:absolute;left:0;top:50%;margin-top:-7px;z-index:999;display:block;color:white;width:100%;height:15px;text-align:center;z-index:999;}
</style>
<scripttype="text/javascript">
functiongallery(obj){
vartit=obj.getAttribute("alt");
document.getElementById("show_tit").firstChild.nodeValue=tit;
document.getElementById("trans").style.display='block';
obj.style.zIndex="3";
}
functionclearBg(obj){
document.getElementById("show_tit").firstChild.nodeValue="";
document.getElementById("trans").style.display='none';
obj.style.zIndex="1";
}
</script>
</head>
<body>
<divid="imagesBox">
<ul>
<li><ahref="#"title="名称1"><imgonmouseover="gallery(this);"onmouseout="clearBg(this)"src="/images/artist//12053006018793_3.jpg"height="55"width="55"alt="名称1"/><span></span></a></li>
<li><ahref="#"title="名称2"><imgonmouseover="gallery(this);"onmouseout="clearBg(this)"src="/images/artist//12053006018793_3.jpg"height="55"width="55"alt="名称2"/><span></span></a></li>
<li><ahref="#"title="名称3"><imgonmouseover="gallery(this);"onmouseout="clearBg(this)"src="/images/artist//12053006018793_3.jpg"height="55"width="55"alt="名称3"/><span></span></a></li>
<li><ahref="#"title="名称4"><imgonmouseover="gallery(this);"onmouseout="clearBg(this)"src="/images/artist//12053006018793_3.jpg"height="55"width="55"alt="名称4"/><span></span></a></li>
<li><ahref="#"title="名称5"><imgonmouseover="gallery(this);"onmouseout="clearBg(this)"src="/images/artist//12053006018793_3.jpg"height="55"width="55"alt="名称5"/><span></span></a></li>
<li><ahref="#"title="名称6"><imgonmouseover="gallery(this);"onmouseout="clearBg(this)"src="/images/artist//12053006018793_3.jpg"height="55"width="55"alt="名称6"/><span></span></a></li>
</ul>
<divid="trans"> </div>
<strongid="show_tit"> </strong>
</div>
</body>
</html>
刚开始因为没有完全明白设计意图，阴差阳错的做了个这样的效果：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>name</title>
<styletype="text/css">
*{margin:0;padding:0;}
aimg{border:none;}
#imagesBox{width:165px;height:100px;position:relative;left:100px;top:100px;}
#imagesBoxli{width:55px;height:55px;float:left;overflow:hidden;position:relative;}
#imagesBoxliimg{width:55px;height:55px;position:relative;z-index:2;}
#imagesBoxlispan{line-height:100px;background:#000;position:absolute;top:0;left:0;z-index:3;opacity:0.5;filter:alpha(opacity=50);
display:block;width:55px;height:55px;}
#imagesBoxlia:hoverspan{display:none;}
#imagesBoxstrong{position:absolute;left:0;top:50%;margin-top:-7px;z-index:999;display:block;color:white;width:100%;height:15px;text-
align:center;}
</style>
<scripttype="text/javascript">
functiongallery(obj){
vartit=obj.getAttribute("title");
document.getElementById("show_tit").firstChild.nodeValue=tit;
document.getElementById("imagesBox").onmouseout=function(){document.getElementById("show_tit").firstChild.nodeValue="这里显示
名字"};
}
</script>
</head>
<body>
<divid="imagesBox">
<ul>
<li><ahref="#"onmouseover="gallery(this);"title="名称1"><imgsrc="/images/artist//12053006018793_3.jpg"height="55"
width="55"alt="名称1"/><span></span></a></li>
<li><ahref="#"onmouseover="gallery(this);"title="名称2"><imgsrc="/images/artist//12053006018793_3.jpg"height="55"
width="55"alt="名称2"/><span></span></a></li>
<li><ahref="#"onmouseover="gallery(this);"title="名称3"><imgsrc="/images/artist//12053006018793_3.jpg"height="55"
width="55"alt="名称3"/><span></span></a></li>
<li><ahref="#"onmouseover="gallery(this);"title="名称4"><imgsrc="/images/artist//12053006018793_3.jpg"height="55"
width="55"alt="名称4"/><span></span></a></li>
<li><ahref="#"onmouseover="gallery(this);"title="名称5"><imgsrc="/images/artist//12053006018793_3.jpg"height="55"
width="55"alt="名称5"/><span></span></a></li>
<li><ahref="#"onmouseover="gallery(this);"title="名称6"><imgsrc="/images/artist//12053006018793_3.jpg"height="55"
width="55"alt="名称6"/><span></span></a></li>
</ul>
<strongid="show_tit">这里显示名字</strong>
</div>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。