导航:首页 > 图片大全 > 如何打开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 09:51:31 浏览：956

比基尼美女的图片发布：2024-11-27 09:45:50 浏览：501

奥迪q3价格及图片2016 发布：2024-11-27 09:42:41 浏览：757

可爱卡通女图片大全图片发布：2024-11-27 09:39:54 浏览：828

湿气重的舌苔图片大全发布：2024-11-27 09:16:22 浏览：123

密码花园彩绘图片大全发布：2024-11-27 08:52:11 浏览：730

爱心可爱图片头像发布：2024-11-27 08:44:49 浏览：625

正常男生侧颜图片发布：2024-11-27 08:43:39 浏览：382

毛线勾小女孩衣服图片发布：2024-11-27 08:32:02 浏览：31

男士树枝衣服搭配图片发布：2024-11-27 08:31:20 浏览：946

图片大全唯美我恨自己的文字发布：2024-11-27 08:21:30 浏览：237

热量高的男生烫发发型图片发布：2024-11-27 08:19:10 浏览：285

电脑邮件图片怎么发送发布：2024-11-27 08:09:23 浏览：317

文字图片备忘录图片发布：2024-11-27 08:05:04 浏览：792

警察执行任务高清图片发布：2024-11-27 08:04:21 浏览：399

女仆动漫图片发布：2024-11-27 07:59:29 浏览：965

2021年女士短发发型图片帅气发布：2024-11-27 07:54:28 浏览：597

人间太热可爱图片发布：2024-11-27 07:43:30 浏览：75

满塘睡莲高清图片发布：2024-11-27 07:43:30 浏览：192

儿童手工可爱图片大全发布：2024-11-27 07:31:13 浏览：669