Welcome, Old Sport!

带有标题的滑动框 CSS & jQuery

by ilikecss ON 2011/03/23 9644

网上很多滑动框的范例,这里组合了一下,总有一款是你需要的。
javascript 里参数可以由个人喜好改动,很简单易懂。
animation Your options are “fade” or “slide”.
动画 可选择”渐变” 或者 “滑动”
speed Defines speed of the animation.
定义动画速度
opacity Used to determine the opacity level the overlay is faded to when hovered over. Fade animation only
透明度 只有在渐变条件下可以设置 数值是 0-1
preload Overlays and backdrops are faded in after the page has loaded.
重叠和背景渐变后加载
anchor_x, anchor_y Horizontal and vertical anchor points for the overlay (eg. left, right, top, bottom).
水平和垂直锚覆盖点(如:左,右,上,下)
hover_x, hover_y Horizontal and vertical overlay hover positions.
水平位置是否悬停效果

Step1. 创建HTML

<!--Circle-->
<div class="mosaic-block circle">
    <a href="http://blog.ilikecss.com/index.php/web-design-blog/blizzard-20-years/" class="mosaic-overlay"></a>
    <div class="mosaic-backdrop"><img src="images/thumbs/blizzard-20.jpg"/></div>
</div>

<!--Fade-->
<div class="mosaic-block fade">
    <a href="http://buildinternet.com/project/mightyicons/" target="_blank" class="mosaic-overlay">
        <div class="details">
            <h4>Mighty Social Icons</h4>
            <p>By Build Internet</p>
        </div>
    </a>
    <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mightyicons.jpg"/></div>
</div>

<!--Bar-->
<div class="mosaic-block bar">
    <a href="http://blog.ilikecss.com/index.php/web-design-blog/dont-be-throw-in-the-towel/" target="_blank" class="mosaic-overlay">
        <div class="details">
            <h4>Quake-hit Fukushima</h4>
            <p>Don't Be Throw In The Towel</p>
        </div>
    </a>
    <div class="mosaic-backdrop"><img src="images/thumbs/dont-be-throw-in-the-towel.jpg" /></div>
</div>

<!--Bar 2-->
<div class="mosaic-block bar2">
    <a href="http://blog.ilikecss.com/index.php/web-design-blog/30-public-awareness-ads/" target="_blank" class="mosaic-overlay">
        <div class="details">
            <h4>The planet is brutally powerful</h4><br/>
            <p>Respect it. Preserve it.</p>
        </div>
    </a>
    <div class="mosaic-backdrop"><img src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/11/05.jpg" /></div>
</div>

<!--Bar 3-->
<div class="mosaic-block bar3">
    <a href="http://www.desktopped.com/featured/2010/09/multi-display-setup-with-four-systems-and-a-whole-lot-of-screen-space/" target="_blank" class="mosaic-overlay">
        <div class="details">
            <h4>Don't kill blockbusters</h4>
            <p>Choose original DVDs over pirated ones.</p>
        </div>
    </a>
    <a href="http://blog.ilikecss.com/index.php/web-design-blog/30-public-awareness-ads/" target="_blank" class="mosaic-backdrop"><img src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/11/03.jpg" /></a>
</div>

<!--Cover-->
<div class="mosaic-block cover">
    <div class="mosaic-overlay"><img src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/11/15.jpg" /></div>
    <a href="http://blog.ilikecss.com/index.php/web-design-blog/30-public-awareness-ads/" target="_blank" class="mosaic-backdrop">
        <div class="details">
            <h4>After the coral reefs completely vanish, humankind will be next</h4>
        </div>
    </a>
</div>

<!--Cover 2-->
<div class="mosaic-block cover2">
    <a href="http://blog.ilikecss.com/index.php/web-design-blog/30-public-awareness-ads/" target="_blank" class="mosaic-overlay"><img src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/11/23.jpg" /></a>
    <a href="http://yourather.com/questions/135" target="_blank" class="mosaic-backdrop">
        <div class="details">
            <h4>Make time for your kids while they%u2019re still kids</h4>
        </div>
    </a>
</div>

<!--Cover 3-->
<div class="mosaic-block cover3">
    <div class="mosaic-overlay"><img src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/11/14.jpg" /></div>
    <a href="http://blog.ilikecss.com/index.php/web-design-blog/30-public-awareness-ads/" target="_blank" class="mosaic-backdrop">
        <div class="details">
            <h4>If the tree falls, we all fall</h4>
        </div>
    </a>
</div>

Step2. 创建CSS

/*General Styles*/
.mosaic-block {
	width: 400px;
	height: 250px;
	float: left;
	position: relative;
	overflow: hidden;
	display: inline;
	margin: 30px 0 0 50px;
	background: #111 url(../images/progress.gif) no-repeat center center;
	border: 7px solid #DDDDD8;
}
.mosaic-block a {
	color: #EEE;
	line-height: 120%;
	text-shadow: 1px 1px 0 #000;
}
.mosaic-block h4 {
	font-size: 130%;
	line-height: 130%;
	margin-bottom: 5px;
}
.mosaic-backdrop {
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	top: 0;
	background: #111;
}
.details {
	margin: 15px 0;
	text-align: center;
}
.mosaic-overlay {
	width: 100%;
	height: 100%;
	display: none;
	z-index: 5;
	position: absolute;
	background: #111;
}
/*** Custom Animation Styles (You can remove/add any styles below) ***/
.circle .mosaic-overlay {
	background: url(../images/hover-magnify.png) no-repeat center center;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
	filter: alpha(opacity=00);
	display: none;
}
.fade .mosaic-overlay {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
	filter: alpha(opacity=00);
	background: url(../images/bg-black.png);
}
.bar .mosaic-overlay {
	bottom: -100px;
	height: 100px;
	background: url(../images/bg-black.png);
}
.bar2 .mosaic-overlay {
	bottom: -50px;
	height: 100px;
	opacity: 0.8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
}
.bar2 .mosaic-overlay:hover {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
}
.bar3 .mosaic-overlay {
	top: -100px;
	height: 100px;
	background: url(../images/bg-black.png);
}
.clearfix {
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

Step3. 插入jQuery和脚本包

jQuery(function($){

	$('.circle').mosaic({
		opacity		:	0.8			//Opacity for overlay (0-1)
	});

	$('.fade').mosaic();

	$('.bar').mosaic({
		animation	:	'slide'		//fade or slide
	});

	$('.bar2').mosaic({
		animation	:	'slide'		//fade or slide
	});

	$('.bar3').mosaic({
		animation	:	'slide',	//fade or slide
		anchor_y	:	'top'		//Vertical anchor position
	});

	$('.cover').mosaic({
		animation	:	'slide',	//fade or slide
		hover_x		:	'400px'		//Horizontal position on hover
	});

	$('.cover2').mosaic({
		animation	:	'slide',	//fade or slide
		anchor_y	:	'top',		//Vertical anchor position
		hover_y		:	'80px'		//Vertical position on hover
	});

	$('.cover3').mosaic({
		animation	:	'slide',	//fade or slide
		hover_x		:	'400px',	//Horizontal position on hover
		hover_y		:	'300px'		//Vertical position on hover
	});

});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
目前还没有评论



TOP