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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jQuery实现简单评论区功能
Oct 26 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
PHP的SQL注入过程分析
2012/01/06 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
php实现微信发红包
2015/12/05 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
python检测lvs real server状态
2014/01/22 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
pyhton列表转换为数组的实例
2018/04/04 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python读取指定字节长度的文本方法
2019/08/27 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
python怎么判断模块安装完成
2020/06/19 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
销售员岗位职责范本
2014/02/03 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
vue的项目如何打包上线
2022/04/13 Vue.js
mysql全面解析json/数组
2022/07/07 MySQL