养眼，非常养眼，把图片放大，还想带放大镜看。下面，分享一段代码，点击图片放大的代码，废话少说直接上代码。
HTML
- <!DOCTYPE>
- <html>
- <head>
- <title>全民博客</title>
- </head>
- <script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
- <style type="text/css">
- /* 图片放大 */
- .imgview{cursor: zoom-in;}
- .imgaiew{position:fixed;width:100%;height:100%;top:0;left:0;text-align:center;z-index: 99999999;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / 63%);}
- .imgaiew img{max-width:100%;max-height:100%;display:inline-block;cursor:zoom-out;}
- /*动画*/
- .aniout{animation:outgptu .6s;}
- .anidownin{animation:downgen .6s;}
- @keyframes downgen{from{opacity:0;transform:translate3d(0,10%,0)}to{opacity:1;transform:translate3d(0,0,0)}}
- @keyframes outgptu{from{opacity:1}to{opacity:0}}
- </style>
- <img src="http://nidecms.com/uploads/alli/20230721/1689891695804184.png" style="width:300px;" class="imgview">
- <script type="text/javascript">
- $('.imgview').css({cursor:'pointer'}).on('click',function(){
- var img = document.createElement('div');
- img.className = 'imgaiew';
- img.innerHTML = `<img src="${this.src}" class="anidownin">`;
- img.onclick = function () {
- $(this).addClass('aniout');
- setTimeout(function () {
- img.remove();
- }, 500)
- }
- document.body.appendChild(img);
- });
- </script>
- </body>
- </html>
高端、优雅、简约、大气、上档次、还简单、特别的简单，给网站换上，用户体验好，整个网站的气质就不一样了。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）