注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于jquery的垂直全屏的滚动幻灯片特效

jQuery插件 fishcity 805浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是一款垂直全屏的滚动特效,它是旧图片向上滚动而且淡出新图片从底部淡入滚动到展示位示,从而形成了一个高雅大气的动画效果,可谓是简洁漂亮。

构建html

<div id="wrapper">
	<div id="carousel">
		<div class="item">
			<div>
				<img src="img/dot.jpg" width="300" height="240" border="0" />
				<div class="text">
					<h3>jQuery.dotdotdot</h3>
					<p>jQuery.dotdotdot is an advanced plugin that puts an ellipsis after multiple line content. It has several usefull additions such as the possibility to keep a link at the end of the text and the possibility to recalculate the ellipsis onWindowResize.</p>
					<a href="http://dotdotdot.frebsite.nl" target="_blank">Visit site &raquo;</a>
				</div>
			</div>
		</div>
		<div class="item">
			<div>
				<img src="img/cfs.jpg" width="300" height="240" border="0" />
				<div class="text">
					<h3>jQuery.carouFredSel</h3>
					<p>jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it's resonsive too.</p>
					<a href="http://caroufredsel.frebsite.nl" target="_blank">Visit site &raquo;</a>
				</div>
			</div>
		</div>
		<div class="item">
			<div>
				<img src="img/val.jpg" width="300" height="240" border="0" />
				<div class="text">
					<h3>jQuery.validVal</h3>
					<p>jQuery.validVal is a plugin designed to simplify form validation. It is highly customizable, very feature rich and can easily be dropped on any type of HTML-form (even AJAX- and HTML5-forms) with very little effort.</p>
					<a href="http://validval.frebsite.nl" target="_blank">Visit site &raquo;</a>
				</div>
			</div>
		</div>
	</div>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background-color: #ccc;
	min-height: 400px;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
body h3 {
	font-size: 20px;
	margin: 30px 0 10px 0;
}
body a:hover {
	color: #000;
}
 
#wrapper {
	width: 900px;
	height: 100%;
	margin-left: -450px;
	position: absolute;
	top: 0;
	left: 50%;
	overflow: hidden;
}
#carousel .item {
	width: 900px;
	height: 340px;
	float: left;
}
#carousel .item > div {
	width: 800px;
	height: 240px;
	padding: 50px;
	overflow: hidden;
}
#carousel .item img {
	width: 300px;
	height: 240px;
	float: left;
	box-shadow: 0 0 20px #999;
}
#carousel .item div.text {
	background-color: #fff;
	width:  400px;
	height: 200px;
	padding: 20px 40px;
	margin-left: 20px;
	float: left;
	position: relative;
	box-shadow: 0 0 20px #999;
}
#carousel .item div.text:after {
	content: " ";
	border: 10px solid transparent;
	border-right-color: #fff;
	display: block;
	width: 0;
	height: 0;
	margin-top: -10px;
	position: absolute;
	left: -20px;
	top: 50%;
}

引入核心库文件

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>

写入JS调用插件

$(function() {
	$('#carousel').carouFredSel({
		width: 900,
		height: '100%',
		direction: 'up',
		items: 1,
		scroll: {
			duration: 600,
			onBefore: function( data ) {
				data.items.visible.children().css( 'opacity', 0 ).delay( 200 ).fadeTo( 400, 1 );
				data.items.old.children().fadeTo( 400, 0 );
			}
		}
	});
});

完成以上工作,便可打开浏览器来测试下这款动感美丽大气简洁的幻灯片特效了。

转载请注明:jQ酷 » 基于jquery的垂直全屏的滚动幻灯片特效

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。