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图片弹窗相关的资料

友情链接