js实现图片放大预览（jq+css)

最新推荐文章于 2024-07-24 15:07:38 发布

qq_45353152

最新推荐文章于 2024-07-24 15:07:38 发布

阅读量1.4k

点赞数

文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/qq_45353152/article/details/121656994

版权

阔别四个月我又杀回来了，公司最近接了个前后端分离的项目，前端居然是java的目录结构，我丢藕！！！我个写前端vue的怎么活😢😢😢

上代码：

CSS
.photoViewer{
      text-align: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      padding: 50px;
      background-color: #00000070;
      box-sizing: border-box;
    }

JS
function photoViewer(e){
      let img = $(e)[0].children[0].src
      let [demo, deImg] = [document.createElement('div'), document.createElement('img')]
      demo.onclick = closeImg(this)
      // demo.onclick = new Function("closeImg(this)")
      // demo.setAttribute("onClick", "closeImg(this)");
      demo.className = 'photoViewer'
      deImg.src = img
      demo.append(deImg)
      console.log(demo, deImg)
      $('body').append(demo)
    }
    function closeImg(e){
      // console.log($(e).parent())
      // let img = $(e)[0].children[0]
      $(e).remove();
    }

这里又一个重点的地方

// 以为对节点onclick直接添加点击事件就可以了  没想到这样加的不行，点击不生效
demo.onclick = closeImg(this)
// 百度找到下面这两个方法，new Functiuon  和  setAttribute，测试过这两个方法都能生效
// setAttribute 与直接再标签加onclickde 效果一样，能直接再审查元素中看到
demo.onclick = new Function("closeImg(this)")
demo.setAttribute("onClick", "closeImg(this)");
// 通过JQ的remove()方法删除本节点实现关闭
$(e).remove();