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ò)滿(mǎn)有創(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="名稱(chēng)1"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱(chēng)1"/><span></span></a></li>
<li><a href="#" title="名稱(chēng)2"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱(chēng)2"/><span></span></a></li>
<li><a href="#" title="名稱(chēng)3"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱(chēng)3"/><span></span></a></li>
<li><a href="#" title="名稱(chēng)4"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱(chēng)4"/><span></span></a></li>
<li><a href="#" title="名稱(chēng)5"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱(chēng)5"/><span></span></a></li>
<li><a href="#" title="名稱(chēng)6"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名稱(chēng)6"/><span></span></a></li>
</ul>
<div id="trans"> </div>
<strong id="show_tit"> </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="名稱(chēng)1"><img src="/images/artist//12053006018793_3.jpg" height="55"
width="55" alt="名稱(chēng)1"/><span></span></a></li>
<li><a href="#" onmouseover="gallery(this);" title="名稱(chēng)2"><img src="/images/artist//12053006018793_3.jpg" height="55"
width="55" alt="名稱(chēng)2"/><span></span></a></li>
<li><a href="#" onmouseover="gallery(this);" title="名稱(chēng)3"><img src="/images/artist//12053006018793_3.jpg" height="55"
width="55" alt="名稱(chēng)3"/><span></span></a></li>
<li><a href="#" onmouseover="gallery(this);" title="名稱(chēng)4"><img src="/images/artist//12053006018793_3.jpg" height="55"
width="55" alt="名稱(chēng)4"/><span></span></a></li>
<li><a href="#" onmouseover="gallery(this);" title="名稱(chēng)5"><img src="/images/artist//12053006018793_3.jpg" height="55"
width="55" alt="名稱(chēng)5"/><span></span></a></li>
<li><a href="#" onmouseover="gallery(this);" title="名稱(chēng)6"><img src="/images/artist//12053006018793_3.jpg" height="55"
width="55" alt="名稱(chēng)6"/><span></span></a></li>
</ul>
<strong id="show_tit">這里顯示名字</strong>
</div>
</body>
</html>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js鼠標(biāo)點(diǎn)擊圖片切換效果實(shí)現(xiàn)代碼
- JS實(shí)現(xiàn)3D圖片旋轉(zhuǎn)展示效果代碼
- js帶縮略圖的圖片輪播效果代碼分享
- js鼠標(biāo)點(diǎn)擊圖片切換效果代碼分享
- js鋼琴按鈕波浪式圖片排列效果代碼分享
- js淡入淡出的圖片輪播效果代碼分享
- js圖片翻書(shū)效果代碼分享
- JS+CSS實(shí)現(xiàn)表格高亮的方法
- js 玩轉(zhuǎn)正則表達(dá)式之語(yǔ)法高亮
- 用JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
- js正文內(nèi)容高亮效果的實(shí)現(xiàn)方法
- js 全兼容可高亮二級(jí)緩沖折疊菜單
相關(guān)文章
最近面試有道題是至少寫(xiě)出 15 個(gè)數(shù)組方法，數(shù)組方法平時(shí)經(jīng)常用到的也就6-7個(gè)，突然要一下子寫(xiě)出15個(gè)，還是有點(diǎn)卡殼了，今天整理一波，需要的可以參考一下2022-05-05
這篇文章主要為大家介紹了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ù)類(lèi)型之Number類(lèi)型
這篇文章主要介紹了?ECMAScript?數(shù)據(jù)類(lèi)型之Number類(lèi)型，Number類(lèi)型使用IEEE?754格式表示整數(shù)和浮點(diǎn)值，更多相關(guān)內(nèi)容請(qǐng)需要的小伙伴參考下面文章內(nèi)容2022-06-06
如何快速的呈現(xiàn)我們的網(wǎng)頁(yè)的技巧整理
如何快速的呈現(xiàn)我們的網(wǎng)頁(yè)的技巧整理...
2007-07-07 
我遇到的參數(shù)傳遞中 雙引號(hào)單引號(hào)嵌套問(wèn)題
我遇到的參數(shù)傳遞中 雙引號(hào)單引號(hào)嵌套問(wèn)題
2010-02-02 
javascript 廣告移動(dòng)特效的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇javascript 廣告移動(dòng)特效的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06 
整理CocosCreator常用知識(shí)點(diǎn)
這篇文章主要介紹了整理CocosCreator常用知識(shí)點(diǎn)，這些知識(shí)點(diǎn)，平時(shí)幾乎都能用到，希望同學(xué)們看完后，可以自己去試一下，加深印象
2021-04-04 
JS對(duì)象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對(duì)象的代碼
這篇文章主要介紹了JS對(duì)象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對(duì)象的代碼,需要的朋友可以參考下
2017-08-08