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>
  • 相关阅读:
    网站服务化
    网站服务化
    dubbo 服务化
    dubbo 服务化
    elk 搭建
    poj1840
    poj1840
    poj2299
    poj2299
    poj2388
  • 原文地址:https://www.cnblogs.com/YangK-java/p/6247616.html
Copyright © 2011-2022 走看看