js圖片彈窗_點擊縮略圖彈出大圖效果js

『壹』 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>

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

『貳』 javascript如何彈出警告框，框內顯示一張圖片，圖片下面一個輸入框，或者類似效果

Javascript自帶的警告框是沒辦法做出這樣的效果的，只能用HTML來模擬。
首先，HTML里在BODY下加一個DIV，樣式{position: absolute;left:0;top:0;display:none;}
然後把警告框的效果做成HTML放在這個DIV里，要彈出這個警告框的時候，把DIV的width跟height設置成document.clientWidth跟clientHeight，就是把DIV最大化，蓋住其他元素來阻止對其他元素的操作（如點擊），再設置style.display="block"來顯示這個DIV，關閉的時候就只需將style.display="none"就OK了~~~
思路就是這樣，實在不懂，寫不來就再追問吧

『叄』 js怎麼做點擊一個圖片彈出一個層的效果

這里有一個彈出層效果
還可以設置居中和隨屏滾動
你可以自己加上下面的功能
裡面有教程和源碼

『肆』 js如何實現點擊圖片彈出窗口並放大這張圖片,最好彈出的窗口不是另一個頁面

<! html>
<html>

<head>
<meta charset="utf-8">
<style type="text/css">
#divid {
position:fixed;
z-index:2000;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
#imgid {
width:1000px;
height:500px;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script >
function myFunction(){
var src=$("#imgip").attr("src")
$("#imgid").attr("src",src)
$("#divid").css("display","block")

}
function myFunc(){
$("#divid").css("display","none")

}
</script>

</head>
<body>
<img id="imgip" onclick="myFunction()" src=""/>

<div style="display:none;" id="divid" >
<img onclick="myFunc()" src="" id="imgid" />
</div>

</body>
</html>

『伍』 js文件里實現點擊一個圖標，彈出選擇圖片的對話框

1、可以使用trigger方式，javascript中沒有原生的trigger函數，可以自己寫一個，也可以直接使用jquery的實現：

[javascript]
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick = function(){alert("button1");trigger(button2,"onclick");}
button2.onclick = function(){alert("button2");}
function trigger(ele,event)
{ele[event]();}

2、也可以使用更加簡單的方式，就是將input覆蓋住要點擊的圖片或者超鏈或者其它div，然後將input設置成完全透明，這樣點擊圖片時其實點擊的是input，如下：

[html]
<div class="ps-image" style="width:300px;height:300px;border:0px sold red; background:url('/images/ps.png')">
<input type="file" id="file" style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/>
</div>

『陸』點擊縮略圖彈出大圖效果js

寫了個簡易版的，基本上能實現你要的效果，你把圖片路徑加上就行了，希望能幫到你，代碼如下：
<div id="divCenter" align="center" style="position: absolute; z-index: 9; display: none; background-color: #eee; width:700px; height:500px;left:200px;top:200px; border:1px solid #222;">
<img src="XXXXXX" /><a href="javascript:void(0);" onclick="picClose();">關閉</a>
</div>
<script>
function picBig() {
var v = document.getElementById('divCenter');
v.style.display = "block";
}

function picClose() {
var v = document.getElementById('divCenter');
v.style.display = "none";
}
</script>
<a name='fff' href='javascript:void(0);' onclick='picBig();'><img src="XXX"></a>

『柒』 js如何實現點擊圖片彈出窗口並放大這張圖片,彈出的窗口有半透明遮罩層效果，彈出的窗口不跳頁面

通過JS代碼 document.getElementById('divID').style.etElementById('divID').style.display = 'none'。函數可以實現。

『捌』 js怎麼做到點擊小圖彈出大圖的

小圖是控制圖片顯示為固定像素，點擊後彈出層，在層DIV里插入大圖

『玖』 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>

『拾』 js點擊一張圖片後,彈出一個框,裡面播放視頻,但是關了後,視頻還在播放,聽得到聲音是怎麼回事

這個問題肯定是這樣的
彈出的框裡麵包含視頻，關了後，只是隱藏了彈出的框，視頻卻沒有用js終止，所以會造成這種情況

導航:首頁 > 編程語言 > js圖片彈窗

js圖片彈窗

與js圖片彈窗相關的資料

友情鏈接