首页 > 其他分享 >超简约前端点击图片弹窗放大(手机端)

超简约前端点击图片弹窗放大(手机端)

时间:2023-06-25 16:47:19浏览次数:44  
标签:简约 img 100% width 点击 top 弹窗 markImg

.markImg{
            width:100%;
            height:100%;
            position:fixed;
            left:0;
            right:0;
            bottom:0;
            top:0;
            background:rgba(0,0,0,0.5);
            padding:15px;
            box-sizing:border-box;
            display:none;
        }
        .markImg img{
            width:100%;
            margin-top:40%;
        }


//图片
<img id="fileShow1Txt" src="" onclick="markFlags(this.src)">


//遮罩层
 <div class="markImg">
                <img id="fileShow1Txt2" src="" />
            </div>

//js点击事件
 function markFlags(img) {
            $('.markImg').fadeIn()
              $('.markImg img').attr('src', img)
        }
        $('.markImg').click(function () {
            $('.markImg').fadeOut()
        })

 

标签:简约,img,100%,width,点击,top,弹窗,markImg
From: https://www.cnblogs.com/SmallChen/p/17503263.html

相关文章

  • VUE防止多次点击,重复请求
    1.添加自定义文件preventReClick.jsimportVuefrom'vue'constpreventReClick=Vue.directive('preventReClick',{  inserted:function(el,binding){    el.addEventListener('click',()=>{      if(!el.disabled)......
  • Konva 内容重叠无法触发点击事件的解决方法
    写在前面:环境:Vue3+Konva+vite在绘制界面时踩坑,主要是关于listening属性的使用在绘制界面时,不免出现有内容重叠的情况,这会影响事件的触发使用设置listening属性可以允许事件穿透,默认为true不可穿透(示例如下)<template><div><divid="mybtn"></div></d......
  • 事件分发三连问:事件是如何从屏幕点击最终到达 Activity 的?CANCEL 事件什么时候会触发?
    一、题面试中提到安卓的事件分发,我们一般都能说到从Activity->Window->DecorView->ViewGroup->View的dispatchTouchEvent流程,这个是最基本的需要掌握的,由此能深入引出一些什么知识点呢?事件是如何从屏幕点击最终到达Activity的?CANCEL事件什么时候会触发?如何解决滑动......
  • android RecyclerView嵌套 RecyclerView 子item 和 父item点击事件如何处理
    前言经常会遇到列表嵌套列表的场景,那么父item和子item会有点击重叠该怎么处理尼?先上效果父adapteropenclassStoreListAdapter(layoutResId:Int,data:MutableList<StoreGoodsBean>):BaseQuickAdapter<StoreGoodsBean,BaseViewHolder>(layoutResId,data){//子adapt......
  • app直播源代码,Android中点击图片放大的简单方法
    app直播源代码,Android中点击图片放大的简单方法Java代码: publicvoidonThumbnailClick(Viewv){//finalAlertDialogdialog=newAlertDialog.Builder(this).create();//ImageViewimgView=getView();//dialog.setView(imgView);//dialog.show();  //全屏显示的......
  • 作者为何要写《简约之美》这本书?程序员们又能从中学到什么呢?
    好程序员和差程序员的区别在于理解能力。差劲的程序员不理解自己做的事情,优秀的程序员则相反。信不信由你,道理就是这么简单。写这本书,是为了帮助各位程序员,以适用于各种编程语言、各种项目的广阔视角来理解软件开发。本书以普通人容易理解的方式,讲解了软件开发的科学规律。如果......
  • Java乐观锁实现文章点击量、收藏计数、点赞计数
    Java乐观锁实现文章点击量、收藏计数、点赞计数......
  • ui设计师界面combobox控件添加鼠标点击信号
    一、概述combobox下拉框控件下拉后会显示预设好的选择内容,可是想要实现显示内容动态可变,点击的时候实时刷新到最新内容,就需要点击信号,但是qt本身没有实现这个点击信号。要实现这个功能本质方法是需要重写combobox的鼠标点击事件,这里介绍如何为ui设计师界面的combobox控件添加......
  • labview电源测试系统简易型labview电源测试系统,提供源程序,可参考学习制作简约测试系统
    labview电源测试系统简易型labview电源测试系统,提供源程序,可参考学习制作简约测试系统。这是一个简单的LabVIEW电源测试系统,它提供了源代码,供学习和参考,以制作一个简约的测试系统。知识点和领域范围:-LabVIEW:LabVIEW是一种图形化编程环境,用于控制和测量应用程序的开发。它可以通过......
  • win10笔记本点击设置-系统卡住,没反应
    1、按Windows+x打开超级菜单,点击“命令提示符(管理)成员)”;2、键入以下命令:sfc/SCANNOW 3、如果检测到问题但无法修复,请使用以下命令:Dism/Online/Cleanup-Image/ScanHealth4、该命令会扫描所有系统文件,与官方系统文件进行对比,对电脑进行不一致扫描。Dism/Online/Cleanup......