实现点击图片显示大图功能

来源：互联网发布：人工智能假肢多少钱编辑：程序博客网时间：2024/05/29 02:15

一、通过js实现

在想要实现点击显示大图功能的页面上添加如下代码即可

CSS代码

<style>        /*img{padding:5px;width:100px;height:auto;}*/        .overlay{            background-color:#000;            opacity: 1;            filter:alpha(opacity=70);            position: fixed;            top:0;            left:0;            width:100%;            height:100%;            z-index: 10;            text-align: center;        }        .overlayimg{            position: absolute;            left: 50%;            top: 50%;            transform: translate(-50%,-50%);        }    </style>

JS代码

<script>        function expandPhoto(){            var overlay = document.createElement("div");            overlay.setAttribute("id","overlay");            overlay.setAttribute("class","overlay");            document.body.appendChild(overlay);            var img = document.createElement("img");            img.setAttribute("class","overlayimg");            img.src = this.getAttribute("src");            document.getElementById("overlay").appendChild(img);            img.onclick = restore;        }        function restore(){            document.body.removeChild(document.getElementById("overlay"));//            document.body.removeChild(document.getElementById("img"));        }        window.onload = function(){            var imgs = document.getElementsByTagName("img");            imgs[0].focus();            for(var i = 0;i<imgs.length;i++){                imgs[i].onclick = expandPhoto;                imgs[i].onkeydown = expandPhoto;            }        }    </script>

存在问题：有些比较大的图无法显示全图，只能显示一部分，目前还未解决，有解决方案的童鞋可在评论里告知

二、采用http://materializecss.com/media.html中的Material Box（材料盒）直接实现

材质框是Lightbox插件的材质设计实现。当用户点击可以放大的图像时。材质框使图像居中，并以平滑，无刺激的方式放大图像。要关闭图像，用户可以再次点击图像，向左滚动或按ESC键。

使用此方法需先引入materialize相关文件

    <script src="/static/jquery/jquery-1.11.1.min.js"></script>    <link href="/static/materialize/css/materialize.min.css" rel="stylesheet">    <script src="/static/materialize/js/materialize.min.js"></script>

后直接添加

<img class="materialboxed" width="650" src="images/sample-1.jpg">

存在问题：相关样式设置在引入的css文件中已写好，不能在引入的css文件中修改，所以进行样式修改会比较麻烦，且所有图片都以同样尺寸显示(width=”650”)，较小图片放大显示清晰度不好

三、jQuery点击小图显示大图代码

<html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>jQuery点击小图显示大图代码</title>    <style type="text/css">          body {       overflow-y: scroll;       font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;       padding: 0;       margin: 0;    }    h1 {       font-size: 31px;       line-height: 32px;       font-weight: normal;       margin-bottom: 25px;    }    a, a:hover {       border: none;       text-decoration: none;    }    img, a img {       border: none;    }    pre {       overflow-x: scroll;       background: #ffffff;       border: 1px solid #cecece;       padding: 10px;    }    .clear {       clear: both;    }    .zoomed > .container {       -webkit-filter: blur(3px);       filter: blur(3px);    }    .gallery {       list-style-type: none;       float: left;    }    .gallery li {       float: left;       width: 80%;       height: auto;       overflow: hidden;    }    .gallery li:nth-child(6n) {       padding-right: 0;    }    .gallery li a, .gallery li img {       float: left;    }    </style>    <!--图片弹出层样式 必要样式-->    <link rel="stylesheet"  href="css/zoom.css" media="all" /></head><body><div class="container">    <ul class="gallery">        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>        <li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>        <li><a href="images/b3.jpg"><img src="images/3.jpg" /></a></li>    </ul>    <div class="clear"></div></div><script src="js/jquery-1.9.1.min.js"></script><script src="js/zoom.min.js"></script></body></html>

0 0