深圳市金黑网络技术有限公司:主营高端网站建设,网络推广,商城/系统开发,公众号小程序app开发等业务。
原生JavaScript点击图片放大功能案例代码

原生JavaScript点击图片放大功能案例代码

原生JavaScript点击图片放大功能案例代码


完全html+css+js代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Document</title>
  6.         <style>
  7.                 ul,li{margin:0;padding:0;list-style: none}
  8.                 #box{width:600px; height:400px;margin:20px auto;position: relative;}
  9.                 ul li{float: left;width:200px;height:200px;}
  10.                 img{width:100%;height:100%;}
  11.                 .mark{width:600px;height:400px; background:#000;opacity: 0.5;}
  12.                  /*修改pic的宽高,可调整图片大小*/
  13.                 .pic{width:300px;height:300px; position: absolute;left:150px;top:50px;}
  14.                 span{position: absolute;width:20px;height:20px;left:450px;top:50px; background: #fff;text-align: center;}
  15.         </style>
  16. </head>
  17. <body>
  18. <div id='box'>
  19.         <ul>
  20.                 <!--插入图片-->
  21.                 <li><img src="img/1.jpg" alt=""></li>
  22.                 <li><img src="img/2.jpg" alt=""></li>
  23.                 <li><img src="img/3.jpg" alt=""></li>
  24.                 <li><img src="img/4.jpg" alt=""></li>
  25.                 <li><img src="img/5.jpg" alt=""></li>
  26.                 <li><img src="img/6.jpg" alt=""></li>
  27.         </ul>
  28.         <!-- <div class='mark'></div>
  29.         <img src="img/2.jpg"  class='pic'>
  30.         <span>X</span> -->
  31. </div>
  32. <script>
  33.         var lis=document.getElementsByTagName('li');
  34.         var box=document.getElementById('box');
  35.                 //遍历所有的li,单击的是哪个li里的图片src 。
  36.                 //        创建div  className='mark' 追加到box
  37.                 //        创建img  src          className  追加到box
  38.                 //        创建span  innerHTML=X  追加到box
  39.                 for(var i=0;i<lis.length;i++){

  40.                              lis[i].onclick=function(){
  41.                                      //console.log(this)
  42.                                      var  newDiv=document.createElement('div');
  43.                                               newDiv.className='mark';
  44.                                               box.appendChild(newDiv);
  45.                                      var  newImg=document.createElement('img');
  46.                                               newImg.className='pic';
  47.                                               newImg.src=this.getElementsByTagName('img')[0].src;
  48.                                              // newImg.src=this.childNodes[0].src;
  49.                                               box.appendChild(newImg);
  50.                                      var newSpan=document.createElement("span");
  51.                                              newSpan.innerHTML='X';
  52.                                              box.appendChild(newSpan);

  53.                                              newSpan.onclick=function(){
  54.                                                      box.removeChild(newDiv);
  55.                                                      box.removeChild(newSpan);
  56.                                                      box.removeChild(newImg);
  57.                                              }

  58.                              }

  59.                 }


  60. </script>
  61. </body>
  62. </html>
复制代码

推荐给好友: [复制链接]
推荐文章
回复

使用道具 举报

相关帖子

发布主题
  • 网站建设

    高端网站设计制作

  • 模板制作

    仿站/效果图转模板

  • 网络推广

    关键词优化/全网推广

  • 技术维护

    网站维护/异常处理

  • 小程序开发

    公众号/小程序开发

  • 系统开发

    商城系统/各类系统开发

  • 定制开发流程

    业务咨询 | 提交需求 | 报价报时 | 付款开工

    联系我们
  • 今日更新:0 昨日更新:0
  • 会员总数:464 模板总数:9920
全国最大PB建站模板下载平台
在线技术QQ

515138

周一至周日9:00-23:00

如有侵权请联系我们

515138@qq.com 在线QQ咨询

微信扫码关注我们