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


Posted in jQuery onMay 29, 2020

本文实例讲述了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

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

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

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

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
jQuery实现鼠标滑动切换图片
May 27 #jQuery
jQuery弹框插件使用方法详解
May 26 #jQuery
jQuery实现的分页插件完整示例
May 26 #jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
You might like
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
javascript 函数调用规则
2009/08/26 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python调用fortran模块
2016/04/08 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
Python 多进程、多线程效率对比
2020/11/19 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
大专生自我鉴定范文
2013/10/01 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
团队经理竞聘书
2014/03/31 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server