前端jquery实现图片点击放大缩小
利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度可能会超出屏幕 的高度)。
js部分:
function clickToBigImg(){//绑定图片函数//var clickImgId = $(this).attr("id");var imgsrc = $(this).attr("src");//alert (imgsrc);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();}};
css部分:
/*全屏显示大图*/
.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: 100%;
}
.bigImg{width:100%;left:0%;top:10%;position:fixed;z-index: 10001;}
附效果图:
前端jquery实现图片点击放大缩小相关推荐
- jQuery实现图片点击放大缩小(小案例)
我们不废话,直接上例子.首先利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图 ...
- JQuery实现图片点击放大
这里使用zoomify,先看实现效果: Gif动态图分辨率太低,实际效果鼠标防止图片上时会变为放大镜,图片放大时会变为缩小镜.... 实现只需要三个步骤: 1.需要引入三个文件:zoomify.css ...
- android+放大缩小图片+有jar嘛,Android相册支持点击放大图片,滑动切换图片,手势放大缩小...
[实例简介] 项目使用了开源框架Universal-Image-Loader 显示本地图库所有照片 点击放大,单击退出 双击放大缩小 支持左右滑动查看图片 支持手势放大缩小图片 [实例截图] [核心代 ...
- 图片点击放大,并显示浮层
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- layui 怎么设置点击图片放大_layui实现一个图片点击放大
layui实现一个图片点击放大 2019-10-27 01:58:45 卢浮宫 版权声明:本文为站长原创文章,转载请写明出处 QQ分享 一.背景 业务需求,实现一个图片点击放大功能.之前有说个一个 ...
- VUE图片预览放大缩小插件viewer
VUE图片预览放大缩小插件viewer 一.安装依赖 npm install v-viewer --save 二.main.js内引用并注册调用 //main.js import Viewer fro ...
- 图片点击放大java_Eova列表显示图片并点击放大
eova3.3.0支持新的上传文件姿势:设置元字段配置 {"filename":"ORIGINAL_TIME"} 在原先保存原文件名的基础上动态增加了时间戳,在 ...
- jQuery点击放大缩小图片尺寸的方法
一.尺寸方法 a).获取方法 .height( ) 获取到高度 .width( )获取到宽度 b).设置方法 .height('值' ) 设置高度 .width('值' )设置宽度 二.放大图片尺寸 ...
- Android 自定义图片点击放大、缩小
@SuppressLint("AppCompatCustomView") public class ZoomImageView extends ImageView implemen ...
最新文章
- 遮挡也能识别?地平线提出时序信息提升行人检测准确度|​CVPR 2020
- 程序员开发进度太慢被告上法庭!公司索赔90万,拿出百度词条当证据
- 使用镀锌铁皮制作负阻器件
- 人工智能:决胜未来之道培训课程大纲
- 讨论下直博和读完硕士再读博,在能力上的差距
- java的数据类型、变量类型笔记总结
- Android串口通信实例分析【附源码】
- Java自动化获取页面主题_基于Selenium2+Java的UI自动化(4) - WebDriver API简单介绍
- 基于KNN实现图像分类——理解图像分类
- 规划系统_智慧水务规划系统思维的设计思考
- 红杉千万美元投资壁虎烘热游戏内置广告
- SQL里面也能用Split()
- 【WPF】在MenuItem中下划线“_”显示不正常
- 【优化算法】非支配排序遗传算法(NSGA)【含Matlab源码 176期】
- Flutter尝鲜:跨平台移动应用开发
- 酒诗词之一(七言诗)
- swift 判断当前设备网络是否可用
- c语言魔方阵难不难,C语言魔方阵问题
- ffmpeg音视频转单声道16位16K赫兹小端点pcm音频
- 基于QT编写的周立功CAN,可进行uds、bootloder的上位机开发