導航:首頁 > 圖片大全 > 如何打開js彈出圖片

如何打開js彈出圖片

發布時間：2023-08-07 01:45:10

A. javascript代碼如何實現點擊圖片跳轉到另外一個連接上

javascript代碼實現點擊圖片跳轉到另外一個連接上的方法是給a標簽加圖片，並附上目標地址。
參考代碼如下：
<html>
<緩搭head><title>增加圖片鏈接，點擊後跳轉</title></head>
<body onload="addLinkForImage()">岩早
<img src="Koala.jpg" width="300" height="200" /粗哪雀>
<img src="Penguins.jpg" width="300" height="200" />
</body>
<script type="text/javascript">
function addLinkForImage(){
var img=document.getElementsByTagName("img");
for(var i=0;i<img.length;i++){
img[i].id="img"+i;
var img1=document.getElementById("img"+i);
var a=document.createElement("a");
//獲取當前元素的父元素進行替換
img1.parentNode.replaceChild(a,img1);
a.href=img1.src;
a.appendChild(img1);
}
}
</script>
</html>

B. js彈出圖片怎麼寫網頁一打開就彈出一張照片的那種！

沒明白你的意思。我寫的你看看能用就採用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<style>
.img{
position: fixed;
z-index: 10;
top:50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
}
#close{
position: absolute;
left: 10px;
top: 5px;

}
body{
background-color: #333;
}
</style>

<body>
<div class="mask"></div>
<div class="img">
<span id="close">關閉</span>
<img src="dd.png" alt="">
</div>
</body>
<script>
var mask = document.getElementById('close');
var img = document.getElementsByTagName('img')[0];
mask.onclick=function(){
img.style.display = "none";
this.style.display = "none";
}
</script>
</html>

沒明白你的意思。我想的是打開頁面的時候就是一個彈窗狀態，當我點擊關閉後彈窗圖片消失。我中間的白色「找不到伺服器」是圖片

C. 怎麼把獲取到的圖片顯示出來，js怎麼寫

很顯然從後端返回的是一個圖片路徑，那麼你要做的就是把這個路徑塞進img的src裡面，如：<img src="路徑"/>
實現步驟：1.先在html裡面定義一個img標簽<img src=""/>
2.一般情況下圖片地址是一個變數，也就是說首先將後端返回的地址保存在一個變數中，如：var imgsrc = res.data.otherImg;(根據介面實際情況獲取，我這里只是舉例)

2.通過js把地址塞進img裡面，如： $('img').attr('src', imgsrc);
這樣就能把圖片渲染出來了。

D. javascript點擊查看圖片，彈框顯示圖片，怎麼用js怎麼實現

最好用插件，去layer官網有專門的點擊圖片，彈出瀏覽還支持多個圖片。

先去官網下載layer包，你的網頁引用layer的js文件。

地址：網頁鏈接點擊相冊層

然後js代碼：

//調用示例

layer.ready(function(){ //為了layer.ext.js載入完畢再執行

var ps=$("#psize").val();

layer.photos({

photos: '#layer-photos-demo'

,shift: ps //0-6的選擇，指定彈出圖片動畫類型，默認隨機

});

html代碼：

</div>

E. js怎麼做點擊一個圖片彈出一個層的效果

其實彈出層的思路還是比較簡單的：

一般是這個層是隱藏的(display:none)，然後點擊你說的"圖片(或者任何的頁面元素)"，這個層就會顯示（一般display:inline-block/block），同時設置一個灰色的背景看起來這個層是浮於下面的層之上的。

下面是一段演示代碼：


<!doctypehtml>
<html>
<head>
<metacharset="utf-8"><title>彈出層—到瀏覽器中央—背景變暗</title>
<style>
*{margin:0;padding:0px;}
body{padding:30px;}
#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;z-index:11;zoom:1;}
#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}
#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}
#showp{padding:5px;}
#text{font-size:12px;text-indent:2em;line-height:20px;}
#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}
</style>
<scripttype="text/javascript">
functionshow(){
variWidth=document.documentElement.clientWidth;
variHeight=document.documentElement.clientHeight;
varbgObj=document.createElement("div");
bgObj.setAttribute("id","bgbox");
bgObj.style.width=iWidth+"px";
bgObj.style.height=Math.max(document.body.clientHeight,iHeight)+"px";
document.body.appendChild(bgObj);
varoShow=document.getElementById('show');
oShow.style.display='block';
oShow.style.left=(iWidth-302)/2+"px";
oShow.style.top=(iHeight-202)/2+"px";
functionoClose(){
oShow.style.display='none';
document.body.removeChild(bgObj);
}
varoClosebtn=document.createElement("span");
oClosebtn.innerHTML="×";
oShow.appendChild(oClosebtn);
oClosebtn.onclick=oClose;
bgObj.onclick=oClose;
}
</script>
</head>
<body>
<aonclick="show();returnfalse"href="#">請猛擊我（我會彈到中間，同時背景變暗）</a>
<divid="show"><h3>彈出層標題欄</h3>
<pid="text">
這里是彈出層內容，內容可以是文字、圖片等，可以是iframe傳進來，也可以用jQuery的load()傳進來。
</p>
</div>
</body>
</html>

閱讀全文

與如何打開js彈出圖片相關的資料

熱點內容

兒童手工可愛圖片大全發布：2024-11-27 07:31:13 瀏覽：667

班組長文字圖片發布：2024-11-27 07:16:09 瀏覽：999

柔胸圖片動漫發布：2024-11-27 07:16:00 瀏覽：862

一個在地上趴著玩兒的小女孩圖片發布：2024-11-27 07:07:04 瀏覽：134

如何把文字壓在圖片上發布：2024-11-27 06:57:41 瀏覽：497

簡單的葫蘆烙畫100種圖片發布：2024-11-27 06:52:36 瀏覽：971

貴氣的男生圖片發布：2024-11-27 06:45:57 瀏覽：308

蘭花草高清版圖片發布：2024-11-27 06:42:13 瀏覽：32

春季針織衣服搭配圖片發布：2024-11-27 06:32:29 瀏覽：347

孕婦簡筆畫圖片大全可愛發布：2024-11-27 06:29:28 瀏覽：490

鉛筆人物圖片男生古風發布：2024-11-27 06:29:28 瀏覽：356

圖片壁紙男生專用低頭發布：2024-11-27 06:06:10 瀏覽：513

很簡單的很可愛的圖片發布：2024-11-27 05:57:38 瀏覽：22

發型屋女生短發圖片發布：2024-11-27 05:56:18 瀏覽：488

男女孩圖片動畫圖片發布：2024-11-27 05:46:33 瀏覽：820

女生高逼格圖片卡通發布：2024-11-27 05:34:51 瀏覽：251

和平精英金耀白虎衣服圖片發布：2024-11-27 05:10:30 瀏覽：266

女生蜷縮在被子里卡通圖片發布：2024-11-27 05:07:54 瀏覽：856

女生圖片痞發布：2024-11-27 05:00:40 瀏覽：11

思景紙價格圖片發布：2024-11-27 04:57:45 瀏覽：433