jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】       这篇文章主要介绍了jQuery+css实现的点击图片放大缩小预览功能,结合实例形式分析了jQuery+css控制图片放大、缩小预览查看的相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery+css实现的点击图片放大缩小预览功能。分享给大家供大家参考，具体如下：

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

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

 !DOCTYPE html 
 html 
 head 
 title qqq /title 
 meta charset="utf-8" 
 style type="text/css" 
 margin:0;
 padding:0;
 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" 
 img src="zsdfsaerg.jpg" id="imgsrc" / 
 /div 
 !-- 放大遮罩层 -- 
 div id="bigimg" /div 
 /body 
 !-- JS -- 
 script src="ajax/libs/jquery/3.1.1/jquery.js" /script 
 script 
function imgbig() {
 var imgsrc = $('#imgsrc').attr('src');
 $("#bigimg").css("display","block");
 $("#(" img src="+imgsrc+" / 
function closeimg() {
 $("#bigimg").css("display","none");
 /script 
 /html 

demo

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。