jQuery实现的图片点击放大缩小功能案例


Posted in jQuery onJanuary 02, 2020

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

我们不废话,直接上例子。首先利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度可能会超出屏幕 的高度)。

来看css部分代码:

<style>
  /*全屏显示大图*/
  .opacityBottom{
    width: 100%;
    height: 100%;
    position: fixed;
    background:rgba(0,0,0,0.8);
    z-index:1000;
    top: 0;
    left: 0
  }
  .none-scroll{
    overflow: hidden;
    height: 80%;
  }
  .bigImg{
    width:80%;
    height: 80%;
    left:10%;
    top:10%;
    position:fixed;
    z-index: 10001;
  }
</style>

咱们再来看下js部分的代码:

$(".image_click").click(function () {
  var imgsrc = $(this).attr("src");
  var opacityBottom = '<div id="opacityBottom" style="display: none"><img class="bigImg" src="'+ imgsrc +'" ></div>';
  $(document.body).append(opacityBottom);
  toBigImg();//变大函数
});
function toBigImg(){
  $("#opacityBottom").addClass("opacityBottom");
  $("#opacityBottom").show();
  $("html,body").addClass("none-scroll");//下层不可滑动
  $(".bigImg").addClass("bigImg");
  /*隐藏*/
  $("#opacityBottom").bind("click",clickToSmallImg);
  $(".bigImg").bind("click",clickToSmallImg);
  var imgHeight = $(".bigImg").prop("height");
  if(imgHeight < h){
    $(".bigImg").css({"top":(h-imgHeight)/2 + 'px'});
  }else{
    $(".bigImg").css({"top":'0px'});
  }
  function clickToSmallImg() {
    $("html,body").removeClass("none-scroll");
    $("#opacityBottom").remove();
  }
};

image_click是绑定图片的class值,这个案例非常简单,还可以通过修改css来展示不同的样式的图片,大家有时间可以研究下,今天有点懒,直接贴的代码。

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

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

jQuery 相关文章推荐
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 #jQuery
You might like
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
理解Javascript闭包
2013/11/01 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python内置函数dir详解
2015/04/14 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
python实现BackPropagation算法
2017/12/14 Python
python递归函数绘制分形树的方法
2018/06/22 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
深入了解python中元类的相关知识
2019/08/29 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
初三学生评语大全
2014/04/24 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
2014年妇联工作总结
2014/11/21 职场文书
先进事迹材料范文
2014/12/29 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书