文章标题

来源：互联网发布：linux qt 中文不显示编辑：程序博客网时间：2024/06/07 06:49

使表格里的缩略图放大为原图，又不会撑大表格
今天做了一个图片放大的功能，鼠标移入显示原图，移出隐藏，再次移入显示，，，网上图片放大的方法有很多，我这个主要是可以查看原图，如果缩略图在表格里，放大避免了撑大表格，因为需要在写一个新图片，代码很简陋，希望对你们有帮助。

<body>  <!-- 缩略图 -->  <img id="img1" src="../image/bg12.jpg" alt="" title=""  style="width:100px;height:100px;">  <!-- 使用flex布局，justify-content:center属性值让图片在屏幕居中 -->  <div style="display:flex;justify-content:center">    <!-- 原图 -->    <img src="" alt="" title="" id="img2"style=""/>  </div></body>  <script>    img1.onmouseover = function () {  //鼠标滑过事件        img2.src = this.src;    //显示原图        if (img2.style.display="none") {    //如果原图片隐藏，再次滑过重新显示原图          img2.style.display="block";        }    }    img1.onmouseout = function () {   //鼠标移出事件        img2.style.display="none";    //原图片隐藏    }  </script>

这里写图片描述

阅读全文

0 0