快捷導(dǎo)航

JS實(shí)現(xiàn)圖片高亮展示效果實(shí)例

更新時(shí)間：2015年11月24日 11:26:22 作者：匯賢雅敘

這篇文章主要介紹了JS實(shí)現(xiàn)圖片高亮展示效果的方法,實(shí)例分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)圖片高亮展示效果的方法。分享給大家供大家參考，具體如下：

昨天朋友讓我?guī)椭鰝€(gè)圖片高亮展示的效果，雖然不難，不過(guò)滿有創(chuàng)意的：

<!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=utf-8" />
<title>name</title>
<style type="text/css">
*{}{margin:0; padding:0;}
a img{}{border:none;}
#imagesBox {}{ width:165px; height:110px; position:relative; left:100px; top:100px; z-index:1; border:1px solid black; 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;}
#imagesBox li {}{ width:55px; height:55px; float:left; overflow:hidden;}
#imagesBox li a,#imagesBox li img {}{ width:55px; height:55px; display:block; cursor:pointer;}
#imagesBox li img{}{ position:relative;}
#imagesBox strong{}{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>
<script type="text/javascript">
  function gallery(obj){
    var tit=obj.getAttribute("alt");  
    document.getElementById("show_tit").firstChild.nodeValue=tit;
    document.getElementById("trans").style.display='block';
    obj.style.zIndex="3";
  }
  function clearBg(obj){
    document.getElementById("show_tit").firstChild.nodeValue="";
    document.getElementById("trans").style.display='none';
    obj.style.zIndex="1";
  }
</script>
</head>
<body>
<div id="imagesBox"> 
  <ul>
  <li><a href="#" title="名稱1"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱1"/><span></span></a></li>
  <li><a href="#" title="名稱2"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱2"/><span></span></a></li>
  <li><a href="#" title="名稱3"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱3"/><span></span></a></li>
  <li><a href="#" title="名稱4"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱4"/><span></span></a></li>
  <li><a href="#" title="名稱5"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱5"/><span></span></a></li>
  <li><a href="#" title="名稱6"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱6"/><span></span></a></li>
 </ul>
<div id="trans">&nbsp;</div>
<strong id="show_tit">&nbsp;</strong>
</div>
</body>
</html>

剛開(kāi)始因?yàn)闆](méi)有完全明白設(shè)計(jì)意圖，陰差陽(yáng)錯(cuò)的做了個(gè)這樣的效果：

<!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=utf-8" />
<title>name</title>
<style type="text/css">
*{margin:0; padding:0;}
a img{border:none;}
#imagesBox { width:165px; height:100px; position:relative; left:100px; top:100px;}
#imagesBox li { width:55px; height:55px; float:left; overflow:hidden; position:relative;}
#imagesBox li img { width:55px; height:55px; position:relative; z-index:2; }
#imagesBox li span { 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;}
#imagesBox li a:hover span{display:none;} 
#imagesBox strong{position:absolute;left:0; top:50%; margin-top:-7px; z-index:999; display:block; color:white; width:100%; height:15px; text-
align:center;} 
</style>
<script type="text/javascript">
  function gallery(obj){
    var tit=obj.getAttribute("title");  
    document.getElementById("show_tit").firstChild.nodeValue=tit;
    document.getElementById("imagesBox").onmouseout=function(){document.getElementById("show_tit").firstChild.nodeValue="這里顯示
名字"};
  }
</script>
</head>
<body>
<div id="imagesBox">
 <ul>
  <li><a href="#" onmouseover="gallery(this);" title="名稱1"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名稱1"/><span></span></a></li>
  <li><a href="#" onmouseover="gallery(this);" title="名稱2"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名稱2"/><span></span></a></li>
  <li><a href="#" onmouseover="gallery(this);" title="名稱3"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名稱3"/><span></span></a></li>
  <li><a href="#" onmouseover="gallery(this);" title="名稱4"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名稱4"/><span></span></a></li>
  <li><a href="#" onmouseover="gallery(this);" title="名稱5"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名稱5"/><span></span></a></li>
  <li><a href="#" onmouseover="gallery(this);" title="名稱6"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名稱6"/><span></span></a></li>
 </ul>
 <strong id="show_tit">這里顯示名字</strong>
</div>
</body>
</html>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

28個(gè)JS常用數(shù)組方法總結(jié)
最近面試有道題是至少寫(xiě)出 15 個(gè)數(shù)組方法，數(shù)組方法平時(shí)經(jīng)常用到的也就6-7個(gè)，突然要一下子寫(xiě)出15個(gè)，還是有點(diǎn)卡殼了，今天整理一波，需要的可以參考一下
2022-05-05
WebGL?繪制與變換使用示例詳解
這篇文章主要為大家介紹了WebGL?繪制與變換使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
使用JavaScript實(shí)現(xiàn)隨機(jī)曲線之間進(jìn)行平滑切換
今天,我運(yùn)用拉格朗日插值法繪制了一條曲線,然而,我并未止步于靜態(tài)展示,而是引入了一個(gè)定時(shí)器,每隔一段時(shí)間便對(duì)曲線上的點(diǎn)進(jìn)行動(dòng)態(tài)更新,從而賦予曲線生命般的動(dòng)態(tài)變化,本文介紹了使用JavaScript實(shí)現(xiàn)隨機(jī)曲線之間進(jìn)行平滑切換,感興趣的朋友可以參考下
2024-11-11
ECMAScript?數(shù)據(jù)類型之Number類型
這篇文章主要介紹了?ECMAScript?數(shù)據(jù)類型之Number類型，Number類型使用IEEE?754格式表示整數(shù)和浮點(diǎn)值，更多相關(guān)內(nèi)容請(qǐng)需要的小伙伴參考下面文章內(nèi)容
2022-06-06
本文通過(guò)實(shí)例給大家詳解介紹了Bootstrap筆記之縮略圖、警告框知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03