javascript ImgBox透明遮罩層背景圖片展示

更新時(shí)間：2009年07月21日 23:15:40 作者：

javascript ImgBox透明遮罩層背景圖片展示,就是增加了一個(gè)關(guān)閉按鈕，比較實(shí)用。

<html> <head> <title>JavaScript Data Access Test</title> <script type="text/javascript"> function topDiv(el){ var elem=document.createElement("div"); elem.className="top-div"; //=========create img tag var img=document.createElement("img"); img.src=el.href; elem.appendChild(img); //=========create close DIV var closeDiv=document.createElement("div"); closeDiv.innerHTML="Close"; closeDiv.onclick=function(){ document.body.removeChild(elem); document.body.removeChild(alpha); } closeDiv.style.position="absolute"; closeDiv.style.right="2px"; closeDiv.style.top="2px"; closeDiv.style.fontSize="12px"; closeDiv.style.color="red"; closeDiv.style.border="1px solid #333"; closeDiv.style.backgroundColor="#eee"; closeDiv.style.cursor="hand"; elem.appendChild(closeDiv); //=========append the top DIV to body document.body.appendChild(elem); var alpha = alphaDiv(elem); } function alphaDiv(el){ var elem=document.createElement("div"); elem.className="alphaDiv"; elem.onclick=function(e){ document.body.removeChild(elem); document.body.removeChild(el); } document.body.appendChild(elem); return elem; } onload=function(){ var links=document.getElementsByTagName("a"); for(var i=0,len=links.length;i<len;i++){ if(links[i].rel=="Imgbox"){ links[i].onclick=function(){ topDiv(this); return false; } } } } </script> <style> .alphaDiv{ z-index:100; width:100%; height:100%; opacity:0.5; background:#666666; top:0; left:0; position:absolute; filter:alpha(opacity=50); } .top-div{ z-index:101; border:1px solid #333; padding:2px; background:#eee; position:absolute; } a{ outline:none; } </style> </head> <body class="body"> <p><a href="http://www.dhdzp.com/images/logo.gif" rel="Imgbox">Click here to show the pic one.</a><br> <a href="http://img.jb51.net/imgby/downloadBtn.gif" rel="Imgbox">Click here to show the pic two.</a><br><a href="#">Click me</a> </p> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

注意上面的圖片地址，大家自己

您可能感興趣的文章:

相關(guān)文章

詳解JS中常用的Fetch API
Fetch API是一種用于進(jìn)行網(wǎng)絡(luò)請(qǐng)求的現(xiàn)代JavaScript API，提供了更簡(jiǎn)潔、強(qiáng)大和靈活的方式來(lái)處理異步數(shù)據(jù)交互，本文主要為大家介紹了js中js中基本用法，感興趣的同學(xué)可以參考下
2023-07-07
手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash
這篇文章主要介紹了手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash，接下來(lái)將會(huì)帶你們了解下這兩者的區(qū)別,以及我們?cè)撊绾问謱憣?shí)現(xiàn)這兩個(gè)函數(shù)
2022-03-03
react基本安裝與測(cè)試示例
這篇文章主要介紹了react基本安裝與測(cè)試,結(jié)合實(shí)例形式分析了react基本安裝命令、引用與測(cè)試相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-04-04
Javascript-Mozilla和IE中的一個(gè)函數(shù)直接量的問(wèn)題分析
Javascript-Mozilla和IE中的一個(gè)函數(shù)直接量的問(wèn)題分析...
2007-08-08
js利用appendChild對(duì)<li>標(biāo)簽進(jìn)行排序的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js利用appendChild對(duì)<li>標(biāo)簽進(jìn)行排序的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
Javascript call及apply應(yīng)用場(chǎng)景及實(shí)例
這篇文章主要介紹了Javascript call及apply應(yīng)用場(chǎng)景及實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測(cè)試結(jié)果的前端測(cè)試工具的思路
對(duì)前端工程師來(lái)說(shuō),跨瀏覽器的兼容性問(wèn)題一直是最頭疼的,測(cè)試一個(gè)小小的東西,就要打開N個(gè)瀏覽器,然后比較來(lái)比較去,記錄個(gè)瀏覽器的數(shù)據(jù),比較不同,實(shí)在是麻煩.
2010-03-03
原生JavaScript創(chuàng)建不可變對(duì)象的方法簡(jiǎn)單示例
這篇文章主要介紹了原生JavaScript創(chuàng)建不可變對(duì)象的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了基于原生JavaScript創(chuàng)建不可變對(duì)象的相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
JavaScript實(shí)現(xiàn)定時(shí)器循環(huán)展示數(shù)組
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)定時(shí)器循環(huán)展示數(shù)組，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
用javascript實(shí)現(xiàn)計(jì)算兩個(gè)日期的間隔天數(shù)
用javascript實(shí)現(xiàn)計(jì)算兩個(gè)日期的間隔天數(shù)...
2007-08-08