javascript - 减少 CSS 中两个 block 之间的间隙

Question

我正在做一个元素，我到了一个我应该将 block 之间的间隙减少到 3px 的部分。在过去的 2 天里，我已经尽力了，但我无法获得所需的显示效果。

这是已完成操作的屏幕截图: Screen Capture of the page

当我将我的代码粘贴到这篇文章中时，我无法运行代码片段，所以我只会给出所需的代码，以便您为我提供帮助。

(function($) {
	var	aux		= {
			// navigates left / right
			navigate	: function( dir, $el, $wrapper, opts, cache ) {
				
				var scroll		= opts.scroll,
					factor		= 1,
					idxClicked	= 0;
					
				if( cache.expanded ) {
					scroll		= 1; // scroll is always 1 in full mode
					factor		= 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item	
					idxClicked	= cache.idxClicked; // the index of the clicked item
				}
				
				// clone the elements on the right / left and append / prepend them according to dir and scroll
				if( dir === 1 ) {
					$wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
						$(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
					});
				}
				else {
					var $first	= $wrapper.children().eq(0);
					
					$wrapper.find('div.ca-item:gt(' + ( cache.totalItems  - 1 - scroll ) + ')').each(function(i) {
						// insert before $first so they stay in the right order
						$(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
					});
				}
				
				// animate the left of each item
				// the calculations are dependent on dir and on the cache.expanded value
				$wrapper.find('div.ca-item').each(function(i) {
					var $item	= $(this);
					$item.stop().animate({
						left	:  ( dir === 1 ) ? '-=' + ( cache.itemW * factor * scroll ) + 'px' : '+=' + ( cache.itemW * factor * scroll ) + 'px'
					}, opts.sliderSpeed, opts.sliderEasing, function() {
						if( ( dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor ) || ( dir === -1 && $item.position().left > ( ( cache.totalItems - 1 - idxClicked ) * cache.itemW * factor ) ) ) {
							// remove the item that was cloned
							$item.remove();
						}						
						cache.isAnimating	= false;
					});
				});
				
			},
			// opens an item (animation) -> opens all the others
			openItem	: function( $wrapper, $item, opts, cache ) {
				cache.idxClicked	= $item.index();
				// the item's position (1, 2, or 3) on the viewport (the visible items) 
				cache.winpos		= aux.getWinPos( $item.position().left, cache );
				$wrapper.find('div.ca-item').not( $item ).hide();
				$item.find('div.ca-content-wrapper').css( 'left', cache.itemW + 'px' ).stop().animate({
					width	: cache.itemW * 2 + 'px',
					left	: cache.itemW + 'px'
				}, opts.itemSpeed, opts.itemEasing)
				.end()
				.stop()
				.animate({
					left	: '0px'
				}, opts.itemSpeed, opts.itemEasing, function() {
					cache.isAnimating	= false;
					cache.expanded		= true;
					
					aux.openItems( $wrapper, $item, opts, cache );
				});
						
			},
			// opens all the items
			openItems	: function( $wrapper, $openedItem, opts, cache ) {
				var openedIdx	= $openedItem.index();
				
				$wrapper.find('div.ca-item').each(function(i) {
					var $item	= $(this),
						idx		= $item.index();
					
					if( idx !== openedIdx ) {
						$item.css( 'left', - ( openedIdx - idx ) * ( cache.itemW * 3 ) + 'px' ).show().find('div.ca-content-wrapper').css({
							left	: cache.itemW + 'px',
							width	: cache.itemW * 2 + 'px'
						});
						
						// hide more link
						aux.toggleMore( $item, false );
					}
				});
			},
			// show / hide the item's more button
			toggleMore	: function( $item, show ) {
				( show ) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide();	
			},
			// close all the items
			// the current one is animated
			closeItems	: function( $wrapper, $openedItem, opts, cache ) {
				var openedIdx	= $openedItem.index();
				
				$openedItem.find('div.ca-content-wrapper').stop().animate({
					width	: '0px'
				}, opts.itemSpeed, opts.itemEasing)
				.end()
				.stop()
				.animate({
					left	: cache.itemW * ( cache.winpos - 1 ) + 'px'
				}, opts.itemSpeed, opts.itemEasing, function() {
					cache.isAnimating	= false;
					cache.expanded		= false;
				});
				
				// show more link
				aux.toggleMore( $openedItem, true );
				
				$wrapper.find('div.ca-item').each(function(i) {
					var $item	= $(this),
						idx		= $item.index();
					
					if( idx !== openedIdx ) {
						$item.find('div.ca-content-wrapper').css({
							width	: '0px'
						})
						.end()
						.css( 'left', ( ( cache.winpos - 1 ) - ( openedIdx - idx ) ) * cache.itemW + 'px' )
						.show();
						
						// show more link
						aux.toggleMore( $item, true );
					}
				});
			},
			// gets the item's position (1, 2, or 3) on the viewport (the visible items)
			// val is the left of the item
			getWinPos	: function( val, cache ) {
				switch( val ) {
					case 0 					: return 1; break;
					case cache.itemW 		: return 2; break;
					case cache.itemW * 2 	: return 3; break;
				}
			}
		},
		methods = {
			init 		: function( options ) {
				
				if( this.length ) {
					
					var settings = {
						sliderSpeed		: 500,			// speed for the sliding animation
						sliderEasing	: 'easeOutExpo',// easing for the sliding animation
						itemSpeed		: 500,			// speed for the item animation (open / close)
						itemEasing		: 'easeOutExpo',// easing for the item animation (open / close)
						scroll			: 1				// number of items to scroll at a time
					};
					
					return this.each(function() {
						
						// if options exist, lets merge them with our default settings
						if ( options ) {
							$.extend( settings, options );
						}
						
						var $el 			= $(this),
							$wrapper		= $el.find('div.ca-wrapper'),
							$items			= $wrapper.children('div.ca-item'),
							cache			= {};
						
						// save the with of one item	
						cache.itemW			= $items.width();
						// save the number of total items
						cache.totalItems	= $items.length;
						
						// add navigation buttons
						if( cache.totalItems > 3 )	
							$el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>')	
						
						// control the scroll value
						if( settings.scroll < 1 )
							settings.scroll = 1;
						else if( settings.scroll > 3 )
							settings.scroll = 3;	
						
						var $navPrev		= $el.find('span.ca-nav-prev'),
							$navNext		= $el.find('span.ca-nav-next');
						
						// hide the items except the first 3
						$wrapper.css( 'overflow', 'hidden' );
						
						// the items will have position absolute 
						// calculate the left of each item
						$items.each(function(i) {
							$(this).css({
								position	: 'absolute',
								left		: i * cache.itemW + 'px'
							});
						});
						
						// click to open the item(s)
						$el.find('a.ca-more').live('click.contentcarousel', function( event ) {
							if( cache.isAnimating ) return false;
							cache.isAnimating	= true;
							$(this).hide();
							var $item	= $(this).closest('div.ca-item');
							aux.openItem( $wrapper, $item, settings, cache );
							return false;
						});
						
						// click to close the item(s)
						$el.find('a.ca-close').live('click.contentcarousel', function( event ) {
							if( cache.isAnimating ) return false;
							cache.isAnimating	= true;
							var $item	= $(this).closest('div.ca-item');
							aux.closeItems( $wrapper, $item, settings, cache );
							return false;
						});
						
						// navigate left
						$navPrev.bind('click.contentcarousel', function( event ) {
							if( cache.isAnimating ) return false;
							cache.isAnimating	= true;
							aux.navigate( -1, $el, $wrapper, settings, cache );
						});
						
						// navigate right
						$navNext.bind('click.contentcarousel', function( event ) {
							if( cache.isAnimating ) return false;
							cache.isAnimating	= true;
							aux.navigate( 1, $el, $wrapper, settings, cache );
						});
						
						// adds events to the mouse
						$el.bind('mousewheel.contentcarousel', function(e, delta) {
							if(delta > 0) {
								if( cache.isAnimating ) return false;
								cache.isAnimating	= true;
								aux.navigate( -1, $el, $wrapper, settings, cache );
							}	
							else {
								if( cache.isAnimating ) return false;
								cache.isAnimating	= true;
								aux.navigate( 1, $el, $wrapper, settings, cache );
							}	
							return false;
						});
						
					});
				}
			}
		};
	
	$.fn.contentcarousel = function(method) {
		if ( methods[method] ) {
			return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof method === 'object' || ! method ) {
			return methods.init.apply( this, arguments );
		} else {
			$.error( 'Method ' +  method + ' does not exist on jQuery.contentcarousel' );
		}
	};
	
})(jQuery);

/* Circular Content Carousel Style */

/*Three points are very important when we want the image to fit the space required: by default: .ca-container{width:1205px;}, .ca-item{width:410px;}, .ca-item-main{width:380px;}  */
.ca-container{
	position:relative;
	margin:25px auto 20px auto;
	width:1205px;
	height:650px;
}
.ca-wrapper{
	width:100%;
	height:100%;
	position:relative;
}
.ca-item{
	position:relative;
	float:left;
	width:410px;
	height:100%;
	text-align:center;
}
.ca-item-main{
	position:absolute;
	width: 380px;
	top:5px;
	left:5px;
	right:5px;
	bottom:5px;
	background:#fff;
	overflow:hidden;
	-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
	width:25px;
	height:38px;
	background:transparent url(../images/arrows.png) no-repeat top left;
	position:absolute;
	top:50%;
	margin-top:-19px;
	left:-40px;
	text-indent:-9000px;
	opacity:0.7;
	cursor:pointer;
	z-index:100;
}
.ca-nav span.ca-nav-next{
	background-position:top right;
	left:auto;
	right:-40px;
}
.ca-nav span:hover{
	opacity:1.0;
}

/*Text over image*/
h2.header {
    bottom: 0;
    position: absolute;
    text-align: center;
	margin: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
	padding: 35px 0px 35px 0px;
	font-family: FeaturedItem;
}
.wrapper {
    display: inline-block;
    position: relative;
}

.wrapper img {
   display: block;
   max-width:100%;
}

.wrapper .overlay {
    position: absolute;
    top:0;
    left:0;
    width:380px;
    height:100%;
    color:white;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Circular Content Carousel with jQuery</title>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
		<div class="container">
			<div id="ca-container" class="ca-container">
				<div class="ca-wrapper">
					<div class="ca-item ca-item-1">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="images/2.jpg"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-2">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="images/5.jpg"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-3">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="images/6.jpg"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-4">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="images/2.jpg"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-5">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="images/5.jpg"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-6">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="images/6.jpg"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-7">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="images/2.jpg"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-8">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="images/5.jpg"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<!-- the jScrollPane script -->
		<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
		<script type="text/javascript">
			$('#ca-container').contentcarousel();
		</script>
    </body>
</html>

如果有人需要在本地运行代码，那么这里有一个 .zip 文件:https://www.dropbox.com/s/x0pgyk8mbplgih0/carousel.zip?dl=0

请告诉我如何解决这个问题。提前致谢。

Answer 1

我真的相信你不能在这里发布你的代码。即使我无法在 jsfiddle 上克隆它!但规则就是规则!

无论如何，你可以用这个解决你的问题:

    .ca-item-main {
        position: absolute;
        width: 405px;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        background: #fff;
        overflow: hidden;
        -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }

    .wrapper {
        display: inline-block;
        position: relative;
        width: 100%;
    }

    .wrapper img {
        display: block;
        min-width: 100%;
    }

.ca-container {
    position: relative;
    margin: 25px auto 20px auto;
    width: 1230px;
    height: 650px;
}