欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

Css+Jquery实现点击图片放大缩小预览 图片预览 查看大图

发布时间：2024/1/8 编程问答 43 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Css+Jquery实现点击图片放大缩小预览 图片预览 查看大图 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

要求

点击一张图片，图片就会放大，查看大图，点击空白处就会隐藏大图，回到缩略图。

技术要点

主要是Jquery进行元素的显示与隐藏。

代码

<!DOCTYPE html> <html> <head><title>qqq</title><meta charset="utf-8"><style type="text/css">*{margin:0;padding:0;}h1{text-align: center;margin:20px 0;}#imgdiv{width: 500px;margin:50px auto;}#imgdiv img{width: 300px;margin:0 100px;}#bigimg{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,.3);top: 0;display: none;}#bigimg img{width: 1000px;margin:auto;position: fixed;left:0;right:0;top: 80px;cursor: pointer;}</style> </head> <body><h1>图片预览 - 放大/缩小</h1><!-- 图片容器 --><div id="imgdiv" onclick="imgbig();"><img src="zsdfsaerg.jpg" id="imgsrc" /></div><!-- 放大遮罩层 --><div id="bigimg" onclick="closeimg();"></div> </body><!-- JS --> <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script> <script> function imgbig() {var imgsrc = $('#imgsrc').attr('src');$("#bigimg").css("display","block");$("#bigimg").html("<img src="+imgsrc+" />"); }function closeimg() {$("#bigimg").css("display","none"); } </script> </html>

demo


Author:TANKING
Date:2020-04-16
Web:www.likeyunba.com
WeChat:face6009

总结

以上是生活随笔为你收集整理的Css+Jquery实现点击图片放大缩小预览 图片预览 查看大图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。