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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jquery实现拖拽添加元素功能
Dec 01 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
FCKeditor的安装(PHP)
2007/01/13 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
vue中如何使用ztree
2018/02/06 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
Python找出9个连续的空闲端口
2016/02/01 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python实现简单http服务器
2018/04/12 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
详解Python中的分支和循环结构
2020/02/11 Python
python 异步async库的使用说明
2020/05/04 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
2014年情人节活动方案
2014/02/16 职场文书
大学新闻系自荐书
2014/05/31 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
python b站视频下载的五种版本
2021/05/27 Python
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL