zoukankan      html  css  js  c++  java
  • 图片点击放大功能

    加载顺序:

    1、css文件在head里面引入

    <!-- 预览图片 -->
    <link rel="stylesheet" href="static/ace/css/simple.slide.css" type="text/css">
    <link rel="stylesheet" href="static/ace/css/animate.css">

    2、js文件在下面引入

        <!-- 预览图片 -->
        <script type="text/javascript" src="static/ace/js/simple.slide.js"></script>

    3、写入js代码

    $('.Img-group').simpleSlide({
            "opacity":0.5//背景透明度
        });//图片预览
     

    4、a标签i属性指定图片路径,class与第三步所指定的class值对应

    <a i="http://localhost:8080/GarageMgtB/uploadFiles/garagepic/001/75ac0645053a4f1ba9f8c3558e4dd29a.png" href="javascript:;" class="Slide Img-group" style="display: inline-block; position: relative; cursor: pointer;"> 
                                                    <span class="tools tools-top" onclick="pic_remove(this,event,'48')">
                                                                    <i class="glyphicon glyphicon-remove"></i>
                                                    </span>
                                                    <img src="http://localhost:8080/GarageMgtB/uploadFiles/garagepic/001/75ac0645053a4f1ba9f8c3558e4dd29a.png" alt="75ac0645053a4f1ba9f8c3558e4dd29a.png" style="height:33px; 40px;margin-left: 5px">
                                             </a>
  • 相关阅读:
    window.onresize绑定事件以及解绑事件
    jqGrid中select带可编辑的
    ROS(机器视觉)
    Python(time模块)
    Python(random模块)
    Python迭代器
    Python生成器
    Python装饰器(函数)
    ROS(URDF机器人建模)
    ROS基础
  • 原文地址:https://www.cnblogs.com/YangK-java/p/6247616.html
Copyright © 2011-2022 走看看