zoukankan      html  css  js  c++  java
  • 简洁 清晰弹出层讲解制作(图片点击放大)

    分享原因:因为要做这个功能在网上找了好多,看的繁琐蛋疼,基于以上原因今天给大家分享个简洁 清晰 又好懂(易于学习)的功能。

    我们先准备个弹出层

    <!--弹出层-->
    <div class="max" id="maxfixed">
    <!--内容-->
    <div id="maxadd"></div>
    </div>

    弹出层的样式是:根据自己需求来自定义。给大家分享个我自己的样式需求
    /*公共弹出层*/
    .max{
    position: fixed; //固定
    100%; //全屏
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.6); //背景为透明黑
    display: none; //隐藏
    z-index: 9; //让其显示在最顶层
    }
    #maxadd{ //弹出层内容区域
    position: absolute; //定位
    top: 20%; //距离顶部20%
    left: 50%; //左右居中
    500px;
    margin-left: -250px;
    }

    接下来要有个触发功能函数的东西:因为是举例子所以随便拿一句代码做个展示,自己网站的样式我就不瞎哔哔了
    <div class="d1" onclick="max(this)"><img src="img/sycake4img1.jpg"/></div>

    最后就是写功能函数:
    function max(a) {                                    //直接使用this-->a
    var maxadd = document.getElementById('maxadd'); //添加图片路径所在区域
    var img1 = a.firstChild; //获取d1下的第一个节点的元素
    var imglj = img1.src; //获取到图片的:图片路径
    if ($("#maxfixed").css("display") == "none") { //判断弹出层是隐藏状态,就显示它
    /*显示*/
    $("#maxfixed").show();
    }
    var img2 = "<img src = " + imglj + " />"; //将刚才获取到的图片路径给到一个新创建的变量img2
    $("#maxadd").html(img2); //将创建的元素img2填充到弹出层的内容区域

    /*点击关闭*/
    $("#maxfixed").click(function() { //给弹出层一个点击事件使其关闭弹出层
    if ($("#maxfixed").css("display") == "block") {
    $("#maxfixed").hide();
    }
    });
    }
    好了  这样就完成了  

    就是这么简单



  • 相关阅读:
    TransactionScop事务机制的使用
    MVC无刷新上传图片并显示
    WebClient和WebRequest获取html代码
    Web.config配置详解
    分类和扩展有什么区别?可以分别用来做什么?分类有哪些局限性?分类的结构体里面有哪些成员?
    有序二维数组的查找
    生成Excel.xlsx文件 iOS
    charles Https抓包
    https 通信流程和Charles 抓包原理
    fastlane自动化打包ipa并发布到firim或者蒲公英
  • 原文地址:https://www.cnblogs.com/thongyan/p/7257046.html
Copyright © 2011-2022 走看看