Welcome, Old Sport!

韩国魔兽世界官方网站的幻灯片效果 CSS & jQuery

by ilikecss ON 2010/12/09 5045

因为最近在玩魔兽世界,访问了韩国魔兽官网,感叹韩国人做游戏网站真的是很给力啊,看到中间的幻灯片是用jQuery做的,效果还不错,就把它扒下来了,不太兼容IE6,对CSS和jQuery做了整理,现在可以兼容大众浏览器了。部分效果使用了CSS3圆角,如需最好效果请使用FF等浏览器。

Step1. 创建HTML

<div class="examples_body">
<h3>Demo</h3>
<div id="slideshow">

<div class="container">
    <div class="slide" id="slide-0" style="background-image: url(images/1.jpg); display: block;"></div>
    <div class="slide" id="slide-1" style="background-image: url(images/2.jpg); display: none;"></div>
    <div class="slide" id="slide-2" style="background-image: url(images/3.jpg); display: none;"></div>
    <div class="slide" id="slide-3" style="background-image: url(images/4.jpg); display: none;"></div>
</div>
<div class="paging">
<a href="javascript:;" id="paging-0" onclick="Slideshow.jump(0, this);" onmouseover="Slideshow.preview(0);" class="current">
</a>
<a href="javascript:;" id="paging-1" onclick="Slideshow.jump(1, this);" onmouseover="Slideshow.preview(1);" class="">
</a>
<a href="javascript:;" id="paging-2" onclick="Slideshow.jump(2, this);" onmouseover="Slideshow.preview(2);" class="">
</a>
<a href="javascript:;" id="paging-3" onclick="Slideshow.jump(3, this);" onmouseover="Slideshow.preview(3);" class="last-slide">
</a>
</div>
<div class="caption"><h3><a href="http://kr.battle.net/wow/ko/blog/472453" class="link">A New Age Has Begun...</a></h3>The undead armies of the Lich King have been vanquished, and the campaign in Northrend has come to an end.</div>

<div class="preview"></div>
<div class="mask"></div>

</div>

Step2. 创建CSS

#slideshow {
	width: 640px;
	height: 300px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
}
#slideshow .container {
	width: 640px;
	height: 300px;
	position: relative;
	z-index: 10;
}
#slideshow .mask {
	width: 640px;
	cursor: pointer;
	height: 300px;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 30;
}
#slideshow .caption {
	width: 580px;
	bottom: 30px;
	left: 30px;
	position: absolute;
	z-index: 35;
}
#slideshow .caption h3 {
	color: #FFFFFF;
	font-weight: bold;
	background: none;
	margin: 0;
	padding: 0;
}
#slideshow .caption h3 a {
	font-size: 20px;
	color: #FFF8D6;
	padding-bottom: 5px;
	display: block;
	text-decoration: underline;
}
#slideshow .caption h3 a:hover {
	color: #FFF;
	text-decoration: none;
}
#slideshow .paging {
	width: 15px;
	position: absolute;
	right: 15px;
	top: 15px;
	z-index: 35;
}
#slideshow .paging a {
	-moz-border-radius-bottomleft: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	background-color: #FFFFFF;
	display: block;
	height: 10px;
	margin-bottom: 5px;
	opacity: 0.5;
	filter:alpha(opacity=50); 
}
#slideshow .paging a:hover, #slideshow .paging a.current {
	opacity: 1;
	filter:alpha(opacity=100); 
}
#slideshow .preview {
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	width: 100px;
	background: #FFFFFF;
	color: #000000;
	display: none;
	padding: 5px;
	position: absolute;
	right: 35px;
	text-align: center;
	top: 15px;
	z-index: 35;
	font-size: 82%;
}
#slideshow .preview span {
	display: block;
	padding-top: 3px;
}
#slideshow .slide {
	width:640px;
	height: 300px;
	height: 300px;
	background-position: 0 0;
	background-repeat: no-repeat;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 15;
}
#slideshow .slide .click-area {
	width: 640px;
	height: 300px;
	bottom: 0;
	left: 0;
	position: absolute;
	z-index: 20;
}
#slideshow .slide .click-area embed {
	z-index: 25;
}

Step3. 插入jQuery和脚本包

脚本:

$(function() {
Slideshow.initialize('#slideshow', [
{
	image: "images/1.jpg",
	desc: "The undead armies of the Lich King have been vanquished, and the campaign in Northrend has come to an end. ",
	title: "A New Age Has Begun...",
	url: "http://kr.battle.net/wow/ko/blog/472456#blog",
	id: "473947"
},
{
	image: "images/2.jpg",
	desc: "The Blizzard Art gallery has been updated with 4 pieces representing the Warcraft universe. ",
	title: "New Fan Art",
	url: "http://kr.battle.net/wow/ko/blog/483410#blog",
	id: "431948"
},
{
	image: "images/3.jpg",
	desc: "We're pleased to unveil the new World of Warcraft: Cataclysm game information page. ",
	title: "Cataclysm Info Page is Live",
	url: "http://kr.battle.net/wow/ko/blog/483412#blog",
	id: "494593"
},
{
	image: "images/4.jpg",
	desc: "The Blizzard Fan Art Section has been updated with 4 new pieces of fan artwork set within the Warcraft universe. ",
	title: "Blizzard Art Gallery Update",
	url: "http://kr.battle.net/wow/ko/blog/472453",
	id: "473946"
}
]);

});

脚本包:

<script type="text/javascript" src="js/slideshow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
目前还没有评论



TOP