设为首页
收藏本站
开启辅助访问
切换到宽版
登录
立即注册
快捷导航
发布信息
搜索
搜索
网站首页
自丢网
社区论坛
自丢网论坛
附件中心
源码下载
邀请码
丢币充值
帖子
搜索附件
搜索附件
自丢网
›
附件中心
›
建站程序/IT教程
›
JavaScript教程
›
点击js放大图片效果.jpg
板块导航
+
模板下载
+
建站程序/IT教程
·
源码下载
·
修罗xiuno教程
·
Discuz教程
·
zzz资源/教程
·
织梦教程
·
服务器教程
·
数据库教程
·
Html/Html5教程
·
JavaScript教程
·
Css/Css3教程
·
建站/web前端教程
·
PHP教程
·
其他编程教程
·
小程序app教程
·
PPT模板/素材
·
Word简历模板/素材
·
Excel模板/素材
·
素材中心
·
百科知识
+
综合教程资源
热门下载
左侧广告
版权所有:自丢网
For 2020-2050 ©
zidiu.com
点击js放大图片效果.jpg
打开方式: 图片查看器
资料大小: 31.46 KB
下载次数: 421
上传会员:
admin
上传时间: 2020-09-28
本站网址:
www.zidiu.com
查看附件所在的主题
下载附件
复制链接推荐给好友
点击附件下载:下载附件
原生JavaScript点击图片放大功能案例代码:
原生JavaScript点击图片放大功能案例代码
完全html+css+js代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{margin:0;padding:0;list-style: none}
#box{width:600px; height:400px;margin:20px auto;position: relative;}
ul li{float: left;width:200px;height:200px;}
img{width:100%;height:100%;}
.mark{width:600px;height:400px; background:#000;opacity: 0.5;}
/*修改pic的宽高,可调整图片大小*/
.pic{width:300px;height:300px; position: absolute;left:150px;top:50px;}
span{position: absolute;width:20px;height:20px;left:450px;top:50px; background: #fff;text-align: center;}
</style>
</head>
<body>
<div id='box'>
<ul>
<!--插入图片-->
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
</ul>
<!-- <div class='mark'></div>
<img src="img/2.jpg" class='pic'>
<span>X</span> -->
</div>
<script>
var lis=document.getElementsByTagName('li');
var box=document.getElementById('box');
//遍历所有的li,单击的是哪个li里的图片src 。
// 创建div className='mark' 追加到box
// 创建img src className 追加到box
// 创建span innerHTML=X 追加到box
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
//console.log(this)
var newDiv=document.createElement('div');
newDiv.className='mark';
box.appendChild(newDiv);
var newImg=document.createElement('img');
newImg.className='pic';
newImg.src=this.getElementsByTagName('img')[0].src;
// newImg.src=this.childNodes[0].src;
box.appendChild(newImg);
var newSpan=document.createElement("span");
newSpan.innerHTML='X';
box.appendChild(newSpan);
newSpan.onclick=function(){
box.removeChild(newDiv);
box.removeChild(newSpan);
box.removeChild(newImg);
}
}
}
</script>
</body>
</html>
复制代码