Welcome, Old Sport!

制作动画效果的广告banner (CSS & jQuery)

by ilikecss ON 2010/10/26 7991

在今天的教程中,我们将创建一个使用jQuery来实现的广告Banner,我们使用2款jQuery的插件来创建一些漂亮的动画。
动画效果您可以自己改变参数来选择,调节;掌握这款效果,您可以制作不同尺寸的广告Banner,再也不需要烦恼不会制作Flash啦~
现在,让我们开始吧!
Animation Banner

Step1. 创建HTML

<div id="ca_banner1" class="ca_banner ca_banner1">
    <div class="ca_slide ca_bg1">
        <div class="ca_zone ca_zone1">
            <!--Product-->
            <div class="ca_wrap ca_wrap1">
                <img src="images/luffy.jpg" width="321" height="285" class="ca_shown" alt="%u30E2%u30F3%u30AD%u30FC%u30FBD%u30FB%u30EB%u30D5%u30A3"/>
                <img src="images/zoro.jpg" width="321" height="285" alt="%u30BE%u30ED" style="display:none;" />
                <img src="images/ace.jpg" width="321" height="285" alt="%u30DD%u30FC%u30C8%u30AC%u30B9%u30FBD%u30FB%u30A8%u30FC%u30B9" style="display:none;" />
                <img src="images/oyaji.jpg" width="321" height="285" alt="%u767D%u3072%u3052" style="display:none;" />
                <img src="images/prd1ex.jpg" width="321" height="285" alt="%u96FB%u4F1D%u866B%u30E1%u30B8%u30E3%u30FC" style="display:none;" />
            </div>
        </div>
        <div class="ca_zone ca_zone2">
            <!--Line-->
            <div class="ca_wrap ca_wrap2">
                <img src="images/line1.gif" class="ca_shown" alt="" />
                <img src="images/line2.gif" alt="" style="display:none;" />
                <img src="images/line2.gif" alt="" style="display:none;" />
                <img src="images/line4.gif" alt="" style="display:none;" />
                <img src="images/line5.gif" alt="" style="display:none;" />
            </div>
        </div>
        <div class="ca_zone ca_zone3">
            <!--Title-->
            <div class="ca_wrap ca_wrap3">
                <img src="images/title1.gif" class="ca_shown" alt="" />
                <img src="images/title2.gif" alt="" style="display:none;" />
                <img src="images/title3.gif" alt="" style="display:none;" />
                <img src="images/title4.gif" alt="" style="display:none;" />
                <img src="images/title5.gif" alt="" style="display:none;" />
            </div>
        </div>
    </div>
</div>

Step2. 创建CSS

.ca_banner{
position: relative;
overflow: hidden;
background: #f0f0f0;
padding: 10px;
border: 5px solid #444;
-moz-box-shadow: 0px 0px 2px #aaa inset;
}
.ca_slide{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.ca_zone{
position: absolute;
width: 100%;
}
.ca_wrap{
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.ca_wrap img.ca_shown{
display: inline !important;
}
/* Custom styles of banner1 */
.ca_banner1{
width: 650px;
height: 285px;
margin: 0 auto;
}
.ca_bg1{
background: #efefef;
}
.ca_banner1 .ca_zone1{
top: 0px;
left: 0px;
}
.ca_banner1 .ca_wrap1{
width: 320px;
height: 285px;
}
.ca_banner1 .ca_zone2{
top: 100px;
left: 320px;
}
.ca_banner1 .ca_wrap2{
width: 334px;
height: 193px;
}
.ca_banner1 .ca_zone3{
top: 10px;
left: 325px;
}
.ca_banner1 .ca_wrap3{
width: 333px;
height: 53px;
}

Step3. 插入jQuery和脚本包

脚本包:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.transform-0.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.banner.js"></script>

脚本:

<script type="text/javascript">
$(function() {
	//we want 5 steps / slides for the first banner
	//let's define what happens for each one:

	/*
	the variable steps has the following structure:
	steps:[step1,step2,...,stepN]
	On each step/transition we define the transition for each one of the areas in the banner
	For the first banner for example, we have 3 areas, each one with a specific number
	of images (the images inside of the "ca_wrap" div). One image is shown as default,
	which for our examples is always the first one (1).
	So as an example, our first step/transition can be:
	[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
	[{"to" : "1"}, {}],
	[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
	This means that for the first transition, the first and third areas are going to show
	their second image, and the second area remains untouched. When we change each image we
	apply a specific effect, which is defined in the plugin.
	*/
	$('#ca_banner1').banner({
		steps : [
			[
				//1 step:
				[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
				[{"to" : "2"}, {}],
				[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
			],
			[
				//2 step:
				[{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
				[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
				[{"to" : "3"}, {"effect": "slideOutRight-slideInRight"}]
			],
			[
				//3 step:
				[{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
				[{"to" : "4"}, {"effect": "slideOutRight-slideInRight"}],
				[{"to" : "4"}, {"effect": "slideOutRight-slideInRight"}]
			],
			[
				//4 step
				[{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
				[{"to" : "5"}, {"effect": "slideOutRight-slideInRight"}],
				[{"to" : "5"}, {"effect": "zoomOut-zoomIn"}]
			],
			[
				//5 step
				[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
				[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
				[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
			]
		],
		total_steps	: 5,
		speed : 4000
	});
});
</script>

脚本说明:
上面脚本分为 step1,step2,…,stepN,step的数量取决于你的广告切换数量。

//1 step:
[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "2"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
{"to" : "2"} 是ID号,定义是显示下一轮你要切换的图片和效果,比如我有5轮,顺序是 2,3,4,5,1。
{"effect": "zoomOutRotated-zoomInRotated"} 参数都是切换效果,你可以自己调节看个人喜好。
目前还没有评论



TOP