jquery点击图片放大功能

js代码
css代码

js代码

       $('#enlarge').click(function () {//获取图片路径var imgsrc = $("#enlarge").attr("src");var opacityBottom = '<div class="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").click(function () {//点击关闭$("html,body").removeClass("none-scroll");$(".opacityBottom").remove();});}

enlarge是原图片的id

css代码

/*使图片在浏览器中居中显示*/
.bigImg {position: absolute;top: 50%;left: 50%;/*图片向左移动自身宽度的50%, 向上移动自身高度的50%。*/transform: translate(-50%,-50%);
}
/*遮罩层*/
.opacityBottom {width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.8);z-index: 9999;top: 0;left: 0;
}

jquery点击图片放大功能相关推荐

jquery 点击图片放大，带上下一张，可通过滚动鼠标进行图片缩放
<?php /*** Created by PhpStorm.* User: 28010* Date: 2022/1/17* Time: 13:50*** 1.这里图片的数据是从数据库里面查询取 ...
jquery点击图片放大效果
点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里. 接下来看一下效果图 HTML结构 <img class="enlargeImg" width= ...
jquery点击图片放大,再点缩小(转)
使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: html代码: <td width=&qu ...
超简单jq完成点击图片放大功能
后台小伙伴给的需求,本想找找类似的插件使用一下算了,想了想这个功能好像也不是很难实现,况且安装插件要先查找很多,然后筛选自己合适的,下载,导入,太麻烦了,不如自己手写. 基本需求是引入 jquery. ...
jQuery插件Magnify放大镜实现javascript图片放大功能
jQuery插件Magnify放大镜实现javascript图片放大功能博客所有文章均属原创作品,如有转载,请注明作者:biuuu,来源:http://www.biuuu.com/?p=459 有时 ...
点击图片放大缩小功能
1.点击图片放大缩小的思路图片部分: <table><div><img style="width:62px;height:83px;display:block ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
百度移动优化：关于移动端点击图片放大有多少人注意？
百度移动搜索落地页体验白皮书4.0于2018年08月15日发布有多少人注意到白皮书最下面的这短短的60字? 好多网站都存在点击图片不可放大,有多少站长注意这个细节问题? 关于加这个功能确实挺麻烦,不懂 ...
h5 - PhotoSwipe图片放大功能集成和使用
说明: PhotoSwipe图片放大功能的简单demo. 重要代码: 1.html中引入js和css文件,和一段固定的代码 <!-- PhotoSwipe styles --& ...
winform窗体上图片放大功能
今天遇到点击图片,所点部位实现放大的功能,网上也有很多资料,记录下自己写的. 窗体上放置两个pictureBox控件,第一个添加image,属性SizeMode设置为StretchImage.可以开始 ...

jquery点击图片放大功能

jquery点击图片放大功能

js代码

css代码

jquery点击图片放大功能相关推荐

最新文章

热门文章