图片点击放大功能

加载顺序：

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>

相关推荐