jQuery 实现点击图片查看原图

分析：点击小图片，展示大图片、蒙版、删除(x)；点击删除(x)，隐藏大图片容器
原理：通过事件代理获取到img的src，赋值到大图片的src中，再显示大图片的容器（蒙版）；点击 “X” 时隐藏大图片的容器（蒙版）

    <style>/* 小图片 */.mixImg{width: 200px;}img{width: 100%;}/* 大图片 */.big-img{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 800;background: rgba(20, 20, 20, 0.8);display: none;}.big-img img{max-width: 1000px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.big-img span{position: absolute;right: 100px;top: 100px;color: #fff;font-size: 20px;cursor:default;}</style>

    <div class="mixImg"><img src="./img/zxc.jpg" alt=""><img src="./img/shangc.png" alt=""><img src="./img/折扣券2拷贝@2x.png" alt=""><img src="./img/折扣券2拷贝@3x.png" alt=""></div><div class="big-img"><img src="" alt=""><span>X</span></div>

        $(".mixImg").on('click','img',function(){let imgSrc = $(this).context.currentSrc$(".big-img img").attr('src',imgSrc)$(".big-img").css("display","block")})$(".big-img span").on("click",function(){$('.big-img').css("display","none")})

jQuery 实现点击图片查看原图相关推荐

点击图片查看原图（图片按比例展示，点击旋转）
使用layer弹框:实现点击图片查看原图的效果: 引入layer,函数封装: // 点击图片查看大图 function showBigImage(e) {let src = $(e).attr('sr ...
HTML5点击图片查看大图,科技常识：HTML5 实现图片预览和查看原图
今天小编跟大家讲解下有关HTML5 实现图片预览和查看原图 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 实现图片预览和查看原图的相关资料,希望小伙伴们看了有所帮助. htm ...
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
今天找到了一个我用了很好的方法,点击缩略图,放大居中展示,且参数可调,亲测可靠. 代码使用意见,将下面的代码放到本地测试效果,可以用一张自己的照片,点击会放大,再次点击还原. 一.需求点击图片查看 ...
html点击小图标显示全屏查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏...
一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof .exampleImg { height:100 ...
php图片点击查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏_javascript技巧...
一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof 三.技巧因为移动端无法添加热点,最终一个解决方 ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...
jquery 实现点击图片居住放大缩小
jquery 实现点击图片居住放大缩小该功能是基于jquery实现的,所以第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调 ...
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
在项目里,有时候会写这样的开关效果,点击开关来回切换,也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片. 下面是一个小的demo示例: <!DOCTYPE html> & ...
JQuery实现点击缩略图查看大图效果
点击缩略图查看大图效果,这里存在一个如何获取图片真实大小的问题.在手机端页面,插入的图片大小都是按照图片的原始尺寸在展示的,如果图片太大完全超出手机的屏幕尺寸 ,我们的bootstrap响应式针对图片 ...

jQuery 实现点击图片查看原图

jQuery 实现点击图片查看原图相关推荐

最新文章

热门文章