jQuery+css实现的点击图片放大缩小预览功能示例【图片预览查看大图】

更新时间：2020年05月29日 09:50:08 作者：TANKING

这篇文章主要介绍了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;
    }
    
    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://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

基于jquery的9行js轻松实现tab控件示例
tab控件的实现方法有很多，在本文为大家详细介绍下如何通过9行js实现简单的tab控件，感兴趣的朋友不要错过
2013-10-10
jQuery入门介绍之基础知识
本文主要给大家介绍了些jQuery的基础知识，算是一个入门的小知识库，包含jQuery简介、对象转换、以及基本选择器和层次选择器等知识点。
2015-01-01
通过jquery的ajax请求本地的json文件方法
今天小编就为大家分享一篇通过jquery的ajax请求本地的json文件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
jquery入门必备的基本认识及实例(整理)
本文整理了一些jquery入门必备的基本知识及相关实例，适合初学者学习，另附一些jquery的常用事件，感兴趣的各位可不要错过了哈
2013-06-06
jquery模拟SELECT下拉框取值效果
说到模拟SELECT框，想必大家第一想到的就是使用javascript吧，其实是jquery也是可以做到的，下面有个不错的示例，感兴趣的朋友可以参考下
2013-10-10
jquery的 filter()方法使用教程
filter() 方法返回符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。这篇文章主要介绍了 jquery的 filter()方法使用,需要的朋友可以参考下
2018-03-03
基于jQuery的AJAX和JSON实现纯html数据模板
jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，从而实现纯html数据模板，下面主要给大家介绍实现代码，感兴趣的朋友一起看下吧
2016-08-08
jquery 判断是否支持Placeholder属性的方法
下面小编就为大家带来一篇jquery 判断是否支持Placeholder属性的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
jQuery实现雪花飘落效果
这篇文章主要为大家详细介绍了jQuery实现雪花飘落效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
jQuery实现简单的列表式导航菜单效果代码
这篇文章主要介绍了jQuery实现简单的列表式导航菜单效果代码,涉及jquery操作鼠标事件及页面元素样式动态变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08