分享一个很好用的移动端Lightbox特效插件及其实现方法

这篇文章主要是介绍本人用Lightbox插件编写的一个实例，让大家更深入地了解这个Lightbox插件。

首先，看一下这个实例最终的效果：

接下来，我们就看看这个效果是怎样实现的吧。

代码的html的结构很简单：

<div class="cut-wrap">
    <div class="cut-imgs">
        <a class="c-img" href="./img/aa.png" data-imagelightbox="f">
            <img src="./img/aa.png" />
        </a>
        <a class="c-img" href="./img/bb.png" data-imagelightbox="f">
            <img src="./img/bb.png" />
        </a>            
        <a class="c-img" href="./img/cc.png" data-imagelightbox="f">
            <img src="./img/cc.png" />
        </a>
        <a class="c-img" href="./img/dd.png" data-imagelightbox="f">
            <img src="./img/dd.png" />
        </a>
        <a class="c-img" href="./img/ee.jpg" data-imagelightbox="f">
            <img src="./img/ee.jpg" />
        </a>
    </div>
</div>

其js代码如下：

$( function()
{
    var
        // loading效果
        activityIndicatorOn = function()
        {
            $( '<div id="imagelightbox-loading"><div></div></div>' ).appendTo( 'body' );
        },
        activityIndicatorOff = function()
        {
            $( '#imagelightbox-loading' ).remove();
        },


        // 白色透明浮层
        overlayOn = function()
        {
            $( '<div id="imagelightbox-overlay"></div>' ).appendTo( 'body' );
        },
        overlayOff = function()
        {
            $( '#imagelightbox-overlay' ).remove();
        },


        // 关闭按钮
        closeButtonOn = function( instance )
        {
            $( '<button type="button" id="imagelightbox-close" title="Close"></button>' )
                .appendTo( 'body' )
                .on( 'click touchend', function(){
                    $( this ).remove(); 
                    instance.quitImageLightbox(); 
                    return false; 
                });
        },
        closeButtonOff = function()
        {
            $( '#imagelightbox-close' ).remove();
        };          


    //  将配置组合起来
    var selectorF = 'a[data-imagelightbox="f"]';
    var instanceF = $( selectorF ).imageLightbox(
        {
            onStart:        function() { overlayOn(); closeButtonOn( instanceF ); },
            onEnd:          function() { overlayOff(); closeButtonOff(); activityIndicatorOff(); },
            onLoadStart:    function() { activityIndicatorOn(); },
            onLoadEnd:      function() { activityIndicatorOff(); }
        });     

});

以上的js代码产生了lightbox的loading元素、白色透明浮层、关闭按钮，同时在插件官网中可以看到更多的lightbox配置。

其css代码如下：

html {
    font-size: 50px;
}
* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
img {
        border: 0;
        vertical-align: middle;
        display: inline-block;
}
.cut-wrap {
    margin: .36rem 0 .5rem 0;
    height: 4.5rem;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.cut-wrap .cut-imgs {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 .3rem;
    height: 4.5rem;
    word-break: keep-all;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.cut-wrap .cut-imgs a {
    width: 2.5rem;
    height: 4.5rem;
    margin-right: .06rem;
    display: inline-block;
}
.cut-wrap .cut-imgs a img {
    height: 100%;
}
#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close {
    -webkit-animation: fade-in .25s linear;
    animation: fade-in .25s linear;
}
@-webkit-keyframes fade-in
{
    from    { opacity: 0; }
    to      { opacity: 1; }
}
@keyframes fade-in
{
    from    { opacity: 0; }
    to      { opacity: 1; }
}
#imagelightbox {
    position: fixed;
        z-index: 9999;
        -ms-touch-action: none;
        touch-action: none;
}
#imagelightbox-loading,
#imagelightbox-loading div {
    border-radius: 50%;
}
#imagelightbox-loading {
    width: 40px; /* 40 */
    height: 40px; /* 40 */
    background-color: #444;
    background-color: rgba( 0, 0, 0, .5 );
    position: fixed;
    z-index: 10003;
    top: 50%;
    left: 50%;
    padding: 10px; /* 10 */
    margin: -20px 0 0 -20px; /* 20 */

    -webkit-box-shadow: 0 0 40px rgba( 0, 0, 0, .75 ); /* 40 */
    box-shadow: 0 0 40px rgba( 0, 0, 0, .75 ); /* 40 */
}
#imagelightbox-loading div {
    width: 20px; /* 20 */
    height: 20px; /* 20 */
    background-color: #fff;

    -webkit-animation: imagelightbox-loading .5s ease infinite;
    animation: imagelightbox-loading .5s ease infinite;
    position: absolute;
        left: 19px;
        top: 18px;
}
@-webkit-keyframes imagelightbox-loading
{
    from { opacity: .5; -webkit-transform: scale( .75 ); }
    50%  { opacity: 1;  -webkit-transform: scale( 1 ); }
    to   { opacity: .5; -webkit-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading
{
    from { opacity: .5; transform: scale( .75 ); }
    50%  { opacity: 1;  transform: scale( 1 ); }
    to   { opacity: .5; transform: scale( .75 ); }
}
#imagelightbox-overlay {        
        background-color: #fff;
        background-color: rgba( 255, 255, 255, .9 );
        position: fixed;
        z-index: 9998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
}
#imagelightbox-close {
    width: 40px; /* 40 */
    height: 40px; /* 40 */
    text-align: left;
    background-color: #666;
    border-radius: 50%;
    position: fixed;
    z-index: 10002;
    top: 40px; /* 40 */
    right: 40px; /* 40 */
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
}
#imagelightbox-close:hover,
#imagelightbox-close:focus { 
    background-color: #111; 
}
#imagelightbox-close::before,
#imagelightbox-close::after {       
    width: 2px;
    background-color: #fff;
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 50%;
    margin-left: -1px;
}
#imagelightbox-close::before {
    -webkit-transform: rotate( 45deg );
    -ms-transform: rotate( 45deg );
    transform: rotate( 45deg );
}
#imagelightbox-close::after {
    -webkit-transform: rotate( -45deg );
    -ms-transform: rotate( -45deg );
    transform: rotate( -45deg );
}
@media only screen and (max-width: 660px) {
    #imagelightbox-close {
        top: 5px; /* 20 */
        right: 7px; /* 20 */
    }
}

就这样，一个漂亮的lightbox动效就被我们做出来啦。