上一篇博客本人主要是介绍了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动效就被我们做出来啦。