css Scroller画廊
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Scroller画廊相关的知识，希望对你有一定的参考价值。
/* ---------------------------------------------------------------------
* scroller gallery plugin - v0001
* ------------------------------------------------------------------ */
(function ( $ ) {
$.fn.scrollerGallery = function( options ){
/* ---------------------------------------------------------------------
* settings
* ------------------------------------------------------------------ */
var settings = $.extend({
defaultGalleryScale: true,
galleryBig: 600,
gallerySmall: 400,
topBarHeight: 100 || options.topBarHeight
}, options );
/* ---------------------------------------------------------------------
* DOM elements
* ------------------------------------------------------------------ */
var scroller = '.scroller' || this.selector,
scrollerWrap = scroller + ' .scroller-wrap',
container = scrollerWrap + ' .scroller-container',
leftBtn = scrollerWrap + ' .left-arrow',
rightBtn = scrollerWrap + ' .right-arrow',
slide = container + ' .slide',
scalebtn = '.scrollerGalleryNav .scalebtn',
cover = slide + ' .cover',
reseTimeDelay = 200;
/* ---------------------------------------------------------------------
* add the close button
* ------------------------------------------------------------------ */
addCloseButton = function( _elem ){
var closeButton = jQuery('<a/>', {
class: 'closebtn',
text: 'x close'
});
$(_elem).append( closeButton );
return $(_elem);
};
/* ---------------------------------------------------------------------
* reset the full screen slides
* ------------------------------------------------------------------ */
resetSlides = function(){
//move up the black div
$('.black_get_bigger').css({
width:'100%',
height:'100%',
position: 'fixed',
top: '100%',
left:0
});
//black bigger
TweenMax.to(
[
$('.black_get_bigger')
],
0.5,
{
top: 0,
ease:Power2.easeInOut,
onComplete : function(){
setTimeout(function(){
$('.black_get_bigger').fadeOut( 1500, function(){
$('.black_get_bigger').remove();
});
$('.big_slide .big_image').fadeOut( 300, function(){
$('.big_slide .big_image').remove();
});
$('.big_slide').fadeOut( 500, function(){
$('.big_slide').remove();
});
}, 300);
}
}
);
};
/* ---------------------------------------------------------------------
* thumbnail to bigger image
* ------------------------------------------------------------------ */
thumbNailToBig = function(_elem){
$('.mini_nav .slide').removeClass('active');
$(_elem).parent().addClass('active');
_img = $(_elem).parent().find('img').attr('src');
$('.big_image').fadeOut(200, function(){
$('.big_image').attr('src', _img);
$('.big_image').fadeIn(300);
});
};
/* ---------------------------------------------------------------------
* add the cloned carousel
* ------------------------------------------------------------------ */
addClonedContainer = function( _elem, _src ){
_elem = addCloseButton(_elem);
var carousel = $(slide + '.isClone').clone();
$.each( carousel, function(index, value){
if( $(this).children('img').attr('src') === _src){
$(this).addClass('active');
}
});
var inside = jQuery('<div/>', {
class: 'inside'
});
var mini_nav = jQuery('<div/>', {
class: 'mini_nav'
});
$(mini_nav).append( $(inside) );
$(carousel).appendTo( $(inside) );
var new_img = jQuery('<img/>', {
class: 'big_image',
src: _src
});
$(new_img).css({
'max-height' : $(window).height() - 400,
});
$(new_img).appendTo(_elem);
$(mini_nav).appendTo(_elem);
return _elem;
};
/* ---------------------------------------------------------------------
* add the big slide
* ------------------------------------------------------------------ */
addBigSlide = function(_elem, _src){
var big_slide = jQuery('<div/>', {
class: 'big_slide'
});
$(big_slide).css({
'background': 'rgba(0,0,0,0.9)',
'display' : 'none'
});
var new_elem = addClonedContainer( big_slide, _src );
$(new_elem).appendTo('body').fadeIn();
};
/* ---------------------------------------------------------------------
* add the bigger black overlay
* ------------------------------------------------------------------ */
addBlackBigger = function( _from_top, _from_left, _width, _height ){
var black_bigger = jQuery('<div/>', {
class: 'black_get_bigger',
});
$(black_bigger).css({
bottom: 0,
left: '50%',
width: 0,
height: 0
});
$(black_bigger).appendTo(container);
return black_bigger;
};
/* ---------------------------------------------------------------------
* make full screen onclick
* ------------------------------------------------------------------ */
makeFullScreen = function( _elem ){
//elements
_parent = $(_elem).parent(),
_img = _parent.find('img');
//dimentions
_from_top = $(_elem).offset().top ;
_from_left = $(_elem).offset().left;
_new_width = $(window).outerWidth();
_new_height = $(window).height();
//add the black overlay
var black_bigger = addBlackBigger(_from_top, _from_left, _new_width, _new_height);
//black bigger
TweenMax.to(
[
$(black_bigger)
],
0.6,
{
width: _new_width + _from_left,
height: _new_height,
left: -(_from_left),
ease:Power2.easeInOut,
onComplete : function(){
//add the big slide
addBigSlide(_elem, _img.attr('src') );
//after a delay make the black slide down
setTimeout(function () {
TweenMax.to( $(black_bigger), 0.5, {
height: 0,
});
}, 200 );
}
}
);
};
/* ---------------------------------------------------------------------
* total width
* ------------------------------------------------------------------ */
totalWidth = function() {
total = 0;
$(slide).each(function() {
total += $(this).width();
});
return total;
};
/* ---------------------------------------------------------------------
* gallery scale
* ------------------------------------------------------------------ */
galleryScale = function() {
//return settings.defaultGalleryScale ? settings.galleryBig : settings.gallerySmall;
var windowHeight = parseInt( $(window).height() ) - parseInt(settings.topBarHeight);
return windowHeight;
},
/* ---------------------------------------------------------------------
* offset
* ------------------------------------------------------------------ */
offset = function(type) {
leftOffset = 0;
centreOffset = 0;
// Calculate and return the width of all the images that are before the 'current' image
if (type == "left") {
$(slide).each(function() {
if ($(this).hasClass('current')) { return false; } else { leftOffset += $(this).width(); }
});
return leftOffset;
}
// Calculate and return the position for where to sit the center/current image
if (type == "centre") {
centreOffset = -( offset("left"))+($(scrollerWrap).width()/2)-($('.current').width()/2);
return centreOffset;
}
};
/* ---------------------------------------------------------------------
* resetter
* ------------------------------------------------------------------ */
resetter = function() {
$(slide).height( galleryScale() );
$(scroller).height( galleryScale());
$(container).width( totalWidth());
$(container).css('left', offset("centre") );
};
/* ---------------------------------------------------------------------
* next and prev scroll buttons
* ------------------------------------------------------------------ */
nextPrevBtn = function(nextPrev) {
setTimeout(function () {
reverseDirection = false;
if (reverseDirection) {
nextPrev === 'prev' ? nextPrev = 'next' : nextPrev = 'prev';
}
if (!TweenMax.isTweening($(container))) {
if (nextPrev == 'prev') {
$(slide+':last').insertBefore(slide+':first');
$(container).css('left', parseFloat($(container).css('left'))-$(slide+':first').width());
$(slide+'.current').removeClass('current').prev().addClass('current');
TweenMax.to(container, 0.5, {left:offset("centre"), ease:Power2.easeInOut});
}
if (nextPrev == 'next') {
$(slide+':first').insertAfter(slide+':last');
$(container).css('left', parseFloat($(container).css('left'))+$(slide+':last').width());
$(slide+'.current').removeClass('current').next().addClass('current');
TweenMax.to(container, 0.5, {left:offset("centre"), ease:Power2.easeInOut});
}
}
}, reseTimeDelay);
};
/* ---------------------------------------------------------------------
* init the plugin
* ------------------------------------------------------------------ */
this.init = function() {
setTimeout(function() {
resetter();
}, 500);
// set teh height of the gallery
$(slide).height( galleryScale() );
// Dependant of what the default gallery size is, adjust the scale button image/class accordingly
settings.defaultGalleryScale ? $(scalebtn).addClass('scaledown') : $(scalebtn).removeClass('scaledown');
$(leftBtn).click(function() {
nextPrevBtn('prev');
});
$(rightBtn).click(function() {
nextPrevBtn('next');
});
$("body").keydown(function(e) {
if(e.keyCode == 37) {
$(leftBtn).click();
}
if(e.keyCode == 39) {
$(rightBtn).click();
}
});
};
/* ---------------------------------------------------------------------
* bind functions to dom elements
* ------------------------------------------------------------------ */
this.bindings = function(){
$(document).on('click', cover, function() {
makeFullScreen(this);
});
$(document).on('click', '.mini_nav .slide .cover', function() {
thumbNailToBig(this);
});
$(document).on('click', '.big_slide .closebtn', function() {
resetSlides();
});
};
/* ---------------------------------------------------------------------
* scroller
* ------------------------------------------------------------------ */
this.scroller = function() {
// If there are less than 5 slides, clone all the current slides so larger screens won't see any unsusual animations
if ($(slide).length == 1) {
for ( var i = 0; i < 6; i++ ) {
$(container).children('.slide').clone().addClass('isClone').appendTo(container);
}
}
else if ($(slide).length == 2 || $(slide).length == 3) {
for ( var i = 0; i < 3; i++ ) {
$(container).children('.slide').clone().addClass('isClone').appendTo(container);
}
}
else if ($(slide).length >= 4 || $(slide).length <= 6) {
$(container).children('.slide').clone().addClass('isClone').appendTo(container);
}
// Make first 'a' set to current
$(slide).first().addClass('current');
// Move images from the end to the front until the 'current' image is in the middle
for ( var i = 0; i < (Math.floor($(slide).length/2)); i++ ) {
$(slide+':last').insertBefore(slide+':first');
}
// Set container width
$(container).width( totalWidth() );
// Center the current image, including when the users window is resized
function centerCurrentImage() {
$(container).css('left', - (this.offset("left") ) + ( $(scrollerWrap).width() / 2) -( $('.current').width() / 2));
}
$(window).resize(function(){
centerCurrentImage();
});
centerCurrentImage();
/* -----------------------------------------------------------------
* fade in the gallery
* --------------------------------------------------------------- */
$(scrollerWrap).fadeIn(1500);
};
/* ---------------------------------------------------------------------
* run the plugin
* ------------------------------------------------------------------ */
this.init();
this.bindings();
this.scroller();
};
}( jQuery ));
<!DOCTYPE html>
<html>
<head>
<title>Scroller Gallery</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/scroller-gallery/css/styles.css" />
</head>
<body>
<div class="scroller">
<div class="scroller-wrap">
<button class="left-arrow">left</button>
<button class="right-arrow">right</button>
<div class="scroller-container">
<div class="slide">
<img data-ind="2" src="/scroller-gallery/slider-tmp/0001.jpeg" alt=" ">
<div class="cover"></div>
</div>
<div class="slide">
<img data-ind="2" src="/scroller-gallery/slider-tmp/0002.jpeg" alt=" ">
<div class="cover"></div>
</div>
<div class="slide">
<img data-ind="2" src="/scroller-gallery/slider-tmp/0003.jpeg" alt=" ">
<div class="cover"></div>
</div>
<div class="slide">
<img data-ind="2" src="/scroller-gallery/slider-tmp/0004.jpeg" alt=" ">
<div class="cover"></div>
</div>
<div class="slide">
<img data-ind="2" src="/scroller-gallery/slider-tmp/0005.jpeg" alt=" ">
<div class="cover"></div>
</div>
<div class="slide">
<img data-ind="2" src="/scroller-gallery/slider-tmp/0006.jpeg" alt=" ">
<div class="cover"></div>
</div>
<div class="slide">
<img data-ind="2" src="/scroller-gallery/slider-tmp/0008.jpeg" alt=" ">
<div class="cover"></div>
</div>
<div class="slide">
<img data-ind="2" src="/scroller-gallery/slider-tmp/0009.jpeg" alt=" ">
<div class="cover"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/scroller-gallery/js/greensock/TweenMax.min.js"></script>
<script src="/scroller-gallery/js/main.js"></script>
<script>
$(function(){
$('.scroller').scrollerGallery({
//--> totdo options
topBarHeight: 400
});
$('body').css({'background':'rgb(225, 225, 234)'});
});
</script>
</body>
</html>
body{
margin:0;
padding:0;
}
.scroller{
position: relative;
background-color: #e6e6e6;
width: 100%;
height: 0;
min-width: 960px;
overflow: hidden;
-webkit-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-ms-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.scroller-wrap{
height: 100%;
display:none;
}
.scroller-container{
position: absolute;
height: inherit;
top: 0;
left: 50%;
}
.slide{
position: relative;
display: block;
float: left;
}
.slide img{
position:abolute;
top:0;
left:0;
z-index:1;
height: inherit;
width: auto;
z-index: 1;
position: relative;
}
.left-arrow {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
z-index: 10;
right: 50px;
}
.right-arrow {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
z-index: 10;
left: 50px;
}
/* -- black on mouseover on the slides -- */
.cover{
position:absolute;
top:0;
left:0;
z-index:2;
width:100%;
height:100%;
background:none;
-webkit-transition: background 350ms ease-in 200ms;
-moz-transition: background 350ms ease-in 200ms;
-o-transition: background 350ms ease-in 200ms;
transition: background 350ms ease-in 200ms;
}
.cover:hover{
cursor:pointer;
background: rgba(0,0,0, 0.7);
}
/* -- big overlays -- */
.black_get_bigger{
background: rgba(0,0,0, 0.9);
position:fixed;
z-index:1000;
}
.big_slide{
background-size: cover;
z-index: 999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.big_slide .closebtn{
position: absolute;
top: 10px;
right: 20px;
color: rgba(255, 255, 255, 0.51);
text-transform: uppercase;
font-family: Helvetica;
border: solid 1px rgba(255, 255, 255, 0.51);
padding: 10px;
cursor: pointer;
}
/* -- big image -- */
.big_image{
margin: auto auto;
display: block;
position:relative;
/* center the image*/
top:50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* -- mini nav -- */
.mini_nav {
position:absolute;
bottom:20px;
width: 100%;
text-align: center;
}
.mini_nav .inside{
display:inline-block;
}
.mini_nav .slide{
max-width:100px;
max-height:100px;
margin-left:20px;
border:solid 2px black;
}
.mini_nav .slide:first-child {
margin-left:0;
}
.mini_nav .slide.active{
border:solid 2px white;
}
.mini_nav .slide .cover:hover{
background:none;
cursor:pointer;
}
.mini_nav .slide img{
max-width:100%;
max-height:100%;
}以上是关于css Scroller画廊的主要内容，如果未能解决你的问题，请参考以下文章