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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现简单三级联动效果
Sep 05 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
python之PyMongo使用总结
2017/05/26 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Python登录注册验证功能实现
2018/06/18 Python
Python魔法方法功能与用法简介
2019/04/04 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
简单了解python列表和元组的区别
2020/05/14 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
介绍一下#error预处理
2015/09/25 面试题
保安员岗位职责
2013/11/17 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
植物园观后感
2015/06/11 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
maven依赖的version声明控制方式
2022/01/18 Java/Android