jQuery响应式图片九宫格布局点击查看大图特效代码下载


jQuery响应式图片九宫格布局点击查看大图特效代码下载
jQuery响应式图片九宫格布局点击查看大图特效代码下载以及图片九宫格布局、点击查看大图等js/jquery网页特效代码下载。

1. 引入CSS

<link href="css/style.css" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/superbox.js"></script>

3. HTML代码

<div class="wrapper">
    <!-- SuperBox -->
    <div class="superbox">
        <div class="superbox-list">
            <img src="img/superbox/superbox-thumb-1.jpg" data-img="img/superbox/superbox-full-1.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-2.jpg" data-img="img/superbox/superbox-full-2.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-3.jpg" data-img="img/superbox/superbox-full-3.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-4.jpg" data-img="img/superbox/superbox-full-4.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-5.jpg" data-img="img/superbox/superbox-full-5.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-6.jpg" data-img="img/superbox/superbox-full-6.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-7.jpg" data-img="img/superbox/superbox-full-7.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-8.jpg" data-img="img/superbox/superbox-full-8.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-9.jpg" data-img="img/superbox/superbox-full-9.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-10.jpg" data-img="img/superbox/superbox-full-10.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-11.jpg" data-img="img/superbox/superbox-full-11.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-12.jpg" data-img="img/superbox/superbox-full-12.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-13.jpg" data-img="img/superbox/superbox-full-13.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-14.jpg" data-img="img/superbox/superbox-full-14.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-15.jpg" data-img="img/superbox/superbox-full-15.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-16.jpg" data-img="img/superbox/superbox-full-16.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-17.jpg" data-img="img/superbox/superbox-full-17.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-18.jpg" data-img="img/superbox/superbox-full-18.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-19.jpg" data-img="img/superbox/superbox-full-19.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-20.jpg" data-img="img/superbox/superbox-full-20.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-21.jpg" data-img="img/superbox/superbox-full-21.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-22.jpg" data-img="img/superbox/superbox-full-22.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-23.jpg" data-img="img/superbox/superbox-full-23.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-24.jpg" data-img="img/superbox/superbox-full-24.jpg" alt="" class="superbox-img">
        </div>
        <div class="superbox-float"></div>
    </div>
    <!-- /SuperBox -->
</div>

相关推荐

发表评论

相关文章