以下是 jquery图片墙滑动展示特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片墙滑动展示</title>
<link rel="stylesheet" href="files/main.css" type="text/css" media="screen">
<script src="files/jquery-1.4.2.min.js"></script>
<script src="files/application.js"></script>
<script src="files/jquery.background.js"></script>
<!--[if IE]>
<link rel="stylesheet" href="files/ie.css" type="text/css" charset="utf-8">
<![endif]-->
<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="files/tooltips.css" type="text/css" charset="utf-8">
</head>
<body>
<div id="wanderwall">
<div class="wrapper">
<div id="frame1" class="frame first">
<a style="display: block;" id="link1" href="#" alt="jQuery is used to power WanderWall's animations">
<span>jQuery</span>
</a>
</div>
<div id="frame2" class="frame two">
<a style="display: block;" id="link2" href="#" alt="CSS3 is used for linear gradients and styling">
<span>CSS3</span>
</a>
</div>
<div id="frame3" class="frame three">
<a style="display: block;" id="link3" href="#" alt="HTML5 powers the data-tooltip tooltips">
<span>HTML5</span>
</a>
</div>
<div id="frame4" class="frame fourth">
<a style="display: block;" id="link4" href="#" alt="Font-Face powers the fonts">
<span>@font-face</span>
</a>
</div>
</div>
</div>
<div id="infoframe"></div>
<div id="mantle">
<center>
<a id="homelink" href="#">Home</a>
</center>
</div>
<!--begin containers-->
<div class="pageholder">
<div class="pageslider">
<div class="page">
<div id="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall </h2>
<h4>Coded & Designed By Addy Osmani</h4>
</div>
<div id="mantleright">
<h4>
<a href="#" data-tooltip="WanderWall is a hover-based interface that allows you to navigate around multiple sliding content areas that are related. To begin using it simply hover over one of the framed boxes above." alt="WanderWall is a hover-based interface that allows you to navigate around multiple sliding content areas that are related. To begin using it simply hover over one of the framed boxes above.">How Does This Work?</a>
</h4>
<h4>
<a href="#" data-tooltip="Compatible with Chrome 5.0+, FireFox 3.6+, Safari 4.0+, IE 6.0+" alt="Compatible with Chrome 5.0+, FireFox 3.6+, Safari 4.0+, IE 6.0+">Compatibility?</a>
</h4>
<h4>
<a href="#" data-tooltip="Vertical + Horizontal panels:jQuery. Styling/Effects:CSS3, Typography:Font-Face, Tooltips:HTML5" alt="Vertical + Horizontal panels:jQuery. Styling/Effects:CSS3, Typography:Font-Face, Tooltips:HTML5">Languages?</a>
</h4>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall 1</h2>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall 2</h2>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall 3</h2>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall 4</h2>
</div>
</div>
</div>
</div>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jquery图片墙滑动展示</title>
<link rel="stylesheet" href="files/main.css" type="text/css" media="screen">
<script src="files/jquery-1.4.2.min.js"></script>
<script src="files/application.js"></script>
<script src="files/jquery.background.js"></script>
<!--[if IE]>
<link rel="stylesheet" href="files/ie.css" type="text/css" charset="utf-8">
<![endif]-->
<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="files/tooltips.css" type="text/css" charset="utf-8">
<style type="text/css">
#wanderwall{background-image:url("images/test_2.jpg")}
</style>
</head><body>
<div id="wanderwall">
<div class="wrapper">
<div id="frame1" class="frame first">
<a style="display: block;" id="link1" href="#" alt="jQuery is used to power WanderWall's animations">
<span>jQuery</span>
</a>
</div>
<div id="frame2" class="frame two">
<a style="display: block;" id="link2" href="#" alt="CSS3 is used for linear gradients and styling">
<span>CSS3</span>
</a>
</div>
<div id="frame3" class="frame three">
<a style="display: block;" id="link3" href="#" alt="HTML5 powers the data-tooltip tooltips">
<span>HTML5</span>
</a>
</div>
<div id="frame4" class="frame fourth">
<a style="display: block;" id="link4" href="#" alt="Font-Face powers the fonts">
<span>@font-face</span>
</a>
</div>
</div>
</div>
<div id="infoframe"></div>
<div id="mantle">
<center>
<a id="homelink" href="#">Home</a>
</center>
</div>
<!--begin containers-->
<div class="pageholder">
<div class="pageslider">
<div class="page">
<div id="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall </h2>
<h4>Coded & Designed By Addy Osmani</h4>
</div>
<div id="mantleright">
<h4>
<a href="#" data-tooltip="WanderWall is a hover-based interface that allows you to navigate around multiple sliding content areas that are related. To begin using it simply hover over one of the framed boxes above." alt="WanderWall is a hover-based interface that allows you to navigate around multiple sliding content areas that are related. To begin using it simply hover over one of the framed boxes above.">How Does This Work?</a>
</h4>
<h4>
<a href="#" data-tooltip="Compatible with Chrome 5.0+, FireFox 3.6+, Safari 4.0+, IE 6.0+" alt="Compatible with Chrome 5.0+, FireFox 3.6+, Safari 4.0+, IE 6.0+">Compatibility?</a>
</h4>
<h4>
<a href="#" data-tooltip="Vertical + Horizontal panels:jQuery. Styling/Effects:CSS3, Typography:Font-Face, Tooltips:HTML5" alt="Vertical + Horizontal panels:jQuery. Styling/Effects:CSS3, Typography:Font-Face, Tooltips:HTML5">Languages?</a>
</h4>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall 1</h2>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall 2</h2>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall 3</h2>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall 4</h2>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(application.js):
$(document).ready(function(){
/*App Variables*/
var currentpage = 0;
var pagewidth = $('.page').width();
var position = 0;
var marginnew = 0;
/*Default Background Position*/
$('#wanderwall').css({
backgroundPosition:'50% 0px'}
);
$("div.frame a").hover(function(){
/*Strip the link identifier to form just the ID*/
var id = this.id.replace("link","");
var currentLink = $(this);
/*ID based hiding of the other frames*/
hideTheRest(id);
position = -296*id;
/*Define the offset at which the page for this frame is present*/
marginnew = pagewidth * id * -1;
/*Show the Home link if not on the Default page*/
if(id > 0){
$('#homelink').show();
}
else{
$('#homelink').hide();
}
/*Animate the Page Slider to the new offset*/
$('.pageslider').stop().animate({
marginLeft:marginnew}
,800);
/*Animate the header background*/
$('#wanderwall').stop().animate({
backgroundPosition:'(50% ' + position +'px )'}
,500,function(){
var distance = 0;
var topdis = -190;
var text = currentLink.attr('alt');
var infoframe = $('#infoframe');
/*Define the offset for the header-wallpaper text to appear next to the frame*/
switch(id){
case "1":distance = 500;
break;
case "2":distance = 730;
break;
case "3":distance = 200;
break;
case "4":distance = 400;
topdis = -198;
break;
}
infoframe.html(text);
infoframe.css('margin-left',distance + 'px');
infoframe.css('margin-top',topdis + 'px');
infoframe.fadeIn();
}
);
}
,function(){
$('#infoframe').hide();
var id = this.id.replace("link","");
$('#wanderwall').stop().animate({
backgroundPosition:'(50% 0px)'}
,500 );
showTheRest();
}
);
function hideTheRest(id){
for (var i=1;
i<5;
i++){
if (i!=id){
$('#frame' + i + ' a').css('display','block');
$('#frame' + i).css('filter','alpha(opacity=90)');
$('#frame' + i).stop().fadeTo("fast",0);
$('#frame' + i + ' a').css('display','none');
}
}
$('#infoframe').css('visibility','visible');
}
/*Back to Home*/
$('#homelink').hover(function(){
marginnew = 0;
pagewidth = $('.page').width();
$('.pageslider').stop().animate({
marginLeft:marginnew}
,800);
$(this).hide();
}
,function(){
}
);
function showTheRest(){
for (var i=1;
i<5;
i++){
$('#frame' + i).stop().fadeTo("fast",0.9);
$('#frame' + i).css('filter','alpha(opacity=90)');
$('#frame' + i + ' a').css('display','inline');
$('#frame' + i + ' a').css('display','block');
}
$('#infoframe').css('visibility','hidden');
}
}
);
CSS代码(main.css):
/*This CSS File contains stylesheet information for the jQuery WanderWall project by Addy Osmani.Portions of this file include CSS3 declarations which may not render in your current browser.Testing has been conducted on FF 3.6,Chrome,Safari 4.0 and IE 6.0 for backwards compatibility.*/
/*Generic body and list styling*/
*{margin:0;padding:0;outline:0;}
ul,li{list-style:none;}
html,body{height:100%;}
html,body{width:100%;background-color:black;font-family:Arial;font-size:13px;}
/*Defaults for clear and focus*/
:focus{outline:0;}
.clear:after{content:".";visibility:hidden;display:block;height:0;clear:both;}
* html .clear{height:1%;}
/*Overall Wrapper*/
.wrapper{width:1005px;margin:0 auto;}
/*Defaults for page links*/
a,a:link,a:visited{text-decoration:none;color:#C52A0B;}
a:hover{color:#448da6;}
img{border:0;}
*{zoom:1;}
/*Begin WanderWall Styling*/
body{background:-webkit-gradient( linear,left bottom,left top,color-stop(0.09,rgb(153,153,153)),color-stop(0.55,rgb(242,242,242)),color-stop(0.78,rgb(240,237,240)));background:-moz-linear-gradient( center bottom,rgb(153,153,153) 9%,rgb(242,242,242) 55%,rgb(240,237,240) 78%);}
#mantle{width:100%;height:30px;background:-webkit-gradient( linear,left bottom,left top,color-stop(0.09,rgb(153,153,153)),color-stop(0.55,rgb(242,242,242)),color-stop(0.78,rgb(252,252,252)));background:-moz-linear-gradient( center bottom,rgb(153,153,153) 9%,rgb(242,242,242) 55%,rgb(252,252,252) 78%);-webkit-background-origin:padding;-webkit-background-clip:content;border-bottom:1px solid #fff;}
#infoframe{width:450px;height:190px;margin-top:-190px;display:none;position:absolute;background-image:url("");background-repeat:no-repeat;font-weight:normal;font-style:normal;font-family:'LeagueGothicRegular',sans-serif;font-size-adjust:0.55;letter-spacing:-1px;color:white;font-size:60px;line-height:60px;text-shadow:2px 2px 2px #0A0A0A;text-transform:uppercase;}
.pageholder{width:1347px;overflow-x:hidden;}
.page{float:left;width:1340px;}
.page:first-child{width:1340px;}
.pageslider{height:270px;overflow-y:hidden;width:7000px;}
#homelink{display:none;font-weight:bold;font-size:25px;font-family:'LeagueGothicRegular',sans-serif;font-size-adjust:0.55;text-transform:uppercase;text-shadow:0 1px 0 #FFFFFF;}
#mantletext{margin:0 auto;margin-top:40px;font-family:'LeagueGothicRegular',sans-serif;font-size-adjust:0.55;letter-spacing:-1px;color:#1f1f1f;font-size:80px;text-transform:uppercase;line-height:85px;text-shadow:0 1px 0 #FFFFFF;margin-left:190px;float:left;}
#mantletext h2{margin:0 auto;color:#444444;letter-spacing:-1px;text-shadow:0 1px 0 #FFFFFF;}
#mantletext h3{font-size:80px;}
#mantletext h4{font-size:30px;margin-left:10px;margin-top:-25px;}
#mantleright{float:right;width:300px;margin:0 auto;color:#444444;letter-spacing:-1px;text-shadow:0 1px 0 #FFFFFF;font-family:'LeagueGothicRegular',sans-serif;font-size-adjust:0.55;font-size:40px;margin-top:30px;}
#mantleright a{color:#444444;}
header{width:100%;height:98px;display:block;}
#wanderwall{height:268px;background-position:50% 0px;background:transparent no-repeat scroll center top;}
#wanderwall .wrapper{width:1004px;}
.frame{background-image:url('../images/frame_.png');width:226px;height:171px;font-size:19px;color:#6c6c6b;float:left;display:inline;margin:50px 15px 0;line-height:25px;text-align:center;}
.frame a{width:220px;height:110px;display:block;padding:35px 0 0;color:#3d3d3d;margin-top:20px;}
.frame span{font-size:24px;color:#3d3d3d;margin:1px 0 0;}
.frame span{font-family:'LeagueGothicRegular',sans-serif;font-size-adjust:0.55;letter-spacing:-1px;color:#666;font-size:40px;}
.first{margin-left:0;}
.fourth{margin-right:0;}
#overlay{width:100%;height:109px;background:rgba(107,115,114,.3);margin:-55px 0 0;z-index:2;margin-top:100px;}
#content #left{width:615px;float:left;}
#content #right{width:340px;float:right;}
.frame:hover{-webkit-transform:rotate(-9deg);-moz-transform:rotate(-9deg);}
#wanderwall{background-image:url("../images/test_5.jpg")}
分享到QQ
分享到微博
微信扫一扫
