以下是 jQuery+CSS3内容变换焦点广告特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery CSS3</title>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
</head>
<body style="width: 98%;">
<div style="width: 815px; margin: 0 auto 0 auto;">
<h1 class="title">基于jQuery和CSS3制作的内容变换焦点广告</h1>
<p style="text-align: center; font-size: 14px;">This is a demo page, recreated using jQuery and CSS3.</p>
<div id="mlb-wrapper">
<div id="details" class="base">
<div id="photo" class="base">
<ul id="photos">
<li><a href="#1"><img src="images/mlb-1.jpg" alt="Caption 1" width="480" height="270" /></a></li>
<li><a href="#2"><img src="images/mlb-2.jpg" alt="Caption 2" width="480" height="270" /></a></li>
<li><a href="#3"><img src="images/mlb-3.jpg" alt="Caption 3" width="480" height="270" /></a></li>
<li><a href="#4"><img src="images/mlb-4.jpg" alt="Caption 4" width="480" height="270" /></a></li>
<li><a href="#5"><img src="images/mlb-5.jpg" alt="Caption 5" width="480" height="270" /></a></li>
<li><a href="#6"><img src="images/mlb-6.jpg" alt="Caption 6" width="480" height="270" /></a></li>
</ul>
</div><!-- photo ends -->
<div id="hover-box">
<div id="thumbs" class="base">
<ul>
<li><a href="#1" class="highlight"><img src="images/mlb-1-thumb.jpg" alt="Caption 1" width="74" height="41" /><span></span></a></li>
<li><a href="#2"><img src="images/mlb-2-thumb.jpg" alt="Caption 2" width="74" height="41" /></a></li>
<li><a href="#3"><img src="images/mlb-3-thumb.jpg" alt="Caption 3" width="74" height="41" /></a></li>
<li><a href="#4"><img src="images/mlb-4-thumb.jpg" alt="Caption 4" width="74" height="41" /></a></li>
<li><a href="#5"><img src="images/mlb-5-thumb.jpg" alt="Caption 5" width="74" height="41" /></a></li>
<li><a href="#6"><img src="images/mlb-6-thumb.jpg" alt="Caption 6" width="74" height="41" /></a></li>
</ul>
<p>Roy Halladay struck out 11 Marlins batters and threw 115 pitches Saturday.</p>
</div><!-- thumbs -->
<div id="navigation" class="base">
<a href="#" id="prev" class="prev-next"><span><<</span> prev</a>
<a href="#" id="play-pause" class="play pause" title="Play or Pause the slider">Play/Pause</a>
<ul>
<li><a href="#1" class="highlight">Story 1</a></li>
<li><a href="#2">Story 2</a></li>
<li><a href="#3">Story 3</a></li>
<li><a href="#4">Story 4</a></li>
<li><a href="#5">Story 5</a></li>
<li><a href="#6">Story 6</a></li>
</ul>
<a href="#" id="next" class="prev-next">next <span>>></span></a>
</div><!-- navigation -->
</div><!-- hover box -->
<div id="description" class="base">
<p id="small-caption">Roy Halladay struck out 11 Marlins batters and threw 115 pitches Saturday.</p>
<h1 id="title"><a href="#">Perfect prescription: History for Doc in Miami</a></h1>
<p id="long-desc">Phillies ace Roy Halladay made history in Miami on Saturday, tossing the 20th perfect game in MLB history vs. the Marlins in a 1-0 win. It was the first no-hitter of Halladay's brilliant career.</p>
</div><!-- description -->
</div><!-- base -->
</div><!-- mlb wrapper -->
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/data.js?v=2.0"></script>
<script type="text/javascript" src="js/general.js?v=2.0"></script>
<!-- google analytics is below -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-1965499-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>
JS代码(data.js):
// This section begins the data held in the "objMLB" object// Normally,this would be in a database and would be available via Ajax or some other methodvar currentItem = 1,objMLB ={
headlineText:["Perfect prescription:History for Doc in Miami","Thome moves up list on homer-happy afternoon","Among mound masters,Rays' Davis stands out","Extra-inning wins cap sweeps for O's,Rangers","Just add votes:Time to fill in 2010 All-Star ballot","MLB Tonight is there six days a week,all season"],// headlineTextsmallCaption:["Roy Halladay struck out 11 Marlins batters and threw 115 pitches Saturday.","Thome had one of 20 Twins hits;
Soriano,Ethier and Ramirez each drove in four runs. (AP)","Davis yielded three hits;
Carpenter fanned eight;
Verlander went 8 1/3;
Chacin allowed one hit. (AP)","Ty Wigginton doubled in Nick Markakis to win it;
David Murphy's sac fly put Texas on top. (AP)","In the American League,14 first basemen are competing to start in the 81st All-Star Game.","MLB Network delves into the major baseball issues weeknights at 6 p.m. ET and Sundays at 5 p.m."],// smallCaptiondescText:["Phillies ace Roy Halladay made history in Miami on Saturday,tossing the 20th perfect game in MLB history vs. the Marlins in a 1-0 win. It was the first no-hitter of Halladay's brilliant career.","Jim Thome hit his 569th home run to move into a tie for 11th place all-time. Alfonso Soriano,Andre Ethier and Hanley Ramirez each hit two long balls to cap their sizzling weekends.","Detroit's Justin Verlander,St. Louis' Chris Carpenter and Colorado's Jhoulys Chacin all threw gems Sunday. But Tampa Bay's Wade Davis outdueled Zack Greinke in a tight 1-0 win.","Ty Wigginton's double in the 10th made the Orioles walk-off winners,3-2,to sweep the Red Sox. The Rangers tied the Mariners in the ninth and won,3-1,on a sac fly and passed ball in the 11th.","The 2010 All-Star Game Sprint Online Ballot is in midseason form. Cast up to 25 ballots per email address to help choose 17 starters for the July 13 game at Angel Stadium.","MLB Tonight is at full speed,with look-ins,analysis,news and highlights from around baseball. Tune in to MLB Network weeknights and Sundays from 5-7 p.m. ET for the action."],// descTextextURL:["#1","#2","#3","#4","#5","#6"] // descText}
;
// objMLB ends hereJS代码(general.js):
/*globals $ window document clearInterval setInterval setTimeout objMLB currentItem */
$(function (){
var s = null,myTimer = null,// primary namespace begins hereMLBContentslider ={
// below are the variables being used in the slidersettings:{
// below is the width of the slider,used when calculating the slide distancesliderWidth:$("#photo").width(),// below is the speed of the animated slider in milisecondsspeed:500,// the speed below is slightly faster for the thumbs appearancetspeed:350,// below is the time between each slide for the auto-sliding mechanismintervalPause:5000,// the variables below are just caching stuff that's reusedphotoList:$("#photo ul"),links:$("#thumbs a,#navigation ul a"),navLinks:$("#navigation ul a"),spans:"#thumbs ul li a span",thumbLinks:$("#thumbs a"),spanHTML:"<span></span>",hoverHTML:"<span class='hoverlight'></span>",hlClass:"highlight",hlLinks:"#thumbs a.highlight",hvLinks:"#thumbs a span.hoverlight",hoverBox:$("#hover-box"),prevNext:$(".prev-next"),playPause:$("#play-pause"),thumbs:$("#thumbs"),mainLink:$("#title>a"),pnItem:0,// below are just initial values for later-used stuffmarginSetting:null,clickedURL:null,clickedHash:null,navURL:null,navHash:null,thumbsURL:null,thumbsHash:null,mousedURL:null,mousedHash:null,currentView:null,activeItem:null}
,// function to populate the data for the clicked item;
data comes from file:"js/data.js"init:function (currentItem,objMLB){
s = this.settings;
$("#thumbs p").html(objMLB.headlineText[currentItem - 1]);
$("#long-desc").html(objMLB.descText[currentItem - 1]);
$("#title>a").html(objMLB.headlineText[currentItem - 1]);
$("#title>a")[0].href = objMLB.extURL[currentItem - 1];
$("#small-caption").html(objMLB.smallCaption[currentItem - 1]);
}
,// the function below shows the thumbs for a quick second,to show the user the full interfaceshowThumbs:function (){
s.thumbs.css("display","block");
s.thumbs.animate({
opacity:1,bottom:"24px"}
,s.speed,function (){
setTimeout(function (){
s.thumbs.animate({
opacity:0,bottom:"-24px"}
,s.speed,function (){
s.thumbs.css("display","none");
}
);
}
,1500);
}
);
}
,// this triggers click functionality for the thumbs and circle linksdoClick:function (){
s = this.settings;
// bind a click event to the thumbnail photos and navigation links$(s.links).bind("click",function (){
clearInterval(myTimer);
s.playPause.removeClass().addClass("play");
$(s.spans).remove();
// get the clicked item from the URLs.clickedURL = this.href.toString();
s.clickedHash = s.clickedURL.split("#")[1];
// a previously existing highlight is removed to prevent duplicates$(s.links).removeClass(s.hlClass);
// loop through the navigation links to highlight the clicked ones.navLinks.each(function (){
s.navURL = this.href.toString();
s.navHash = s.navURL.split("#")[1];
if (s.clickedHash === s.navHash){
$(this).addClass(s.hlClass);
$(s.spanHTML).appendTo(s.hlLinks);
}
}
);
// loop through all thumbnails,highlight the clicked ones.thumbLinks.each(function (){
s.thumbsURL = this.href.toString();
s.thumbsHash = s.thumbsURL.split("#")[1];
if (s.clickedHash === s.thumbsHash){
$(this).addClass(s.hlClass);
$(s.spanHTML).appendTo(s.hlLinks);
}
}
);
// if any of items 2-6 are clicked,animate the margin accordinglyif (s.clickedHash > 1){
s.marginSetting = s.sliderWidth * s.clickedHash - s.sliderWidth;
s.photoList.animate({
marginLeft:"-" + s.marginSetting + "px"}
,s.speed,function (){
// optional callback after animation completes}
);
// if item 1 is clicked,send the switcher back to the front (0 margin)}
else{
s.photoList.animate({
marginLeft:"0px"}
,s.speed,function (){
// optional callback after animation completes}
);
}
MLBContentslider.init(s.clickedHash,objMLB);
return false;
}
);
}
,// This triggers the hover funcionality for thumbsdoHover:function (){
s = this.settings;
// create the hover effect on the thumbnailss.links.hover(function (){
// remove highlight to prevent duplicates$(s.hvLinks).remove();
$(s.spans).remove();
$(s.hoverHTML).appendTo(s.hlLinks);
s.mousedURL = this.href.toString();
s.mousedHash = s.mousedURL.split("#")[1];
$(s.hoverHTML).appendTo("#thumbs ul li:nth-child(" + s.mousedHash + ") a");
}
,function (){
// callback executes after hover complete,so highlight is always ultimately removed$(s.hvLinks).remove();
$(s.hoverHTML).appendTo(s.hlLinks);
}
);
// Fade in the thumbs only when the nav bar is hovered// If you want the thumbs always visible,comment out these 5 lines below,and show #thumbs in CSSs.hoverBox.hover(function (){
s.thumbs.css("display","block");
s.thumbs.stop().animate({
opacity:1,bottom:"24px"}
,s.tspeed);
}
,function (){
// callback function after animation completess.thumbs.stop().animate({
opacity:0,bottom:"0px"}
,s.tspeed,function (){
s.thumbs.css("display","none");
}
);
}
);
}
,// prepare the previous/next buttons for the actions that resultprepPreviousNext:function (){
s.prevNext.bind("click",function (){
clearInterval(myTimer);
s.playPause.removeClass().addClass("play");
s.activeItem = $("#thumbs ul li a.highlight")[0].href.split("#")[1];
// make sure the value from the URL is a number,otherwise addition operator won't works.activeItem = parseInt(s.activeItem,10);
// decide the prev/next item based on link ID and active item// this makes sure that "6" is the "previous" item in relation to "1",// and "1" is "next" in relation to "6"if ($(this).attr("id") === "prev"){
if (s.activeItem === 1){
s.pnItem = 6;
}
else{
s.pnItem = s.activeItem - 1;
}
}
else{
if (s.activeItem === 6){
s.pnItem = 1;
}
else{
s.pnItem = s.activeItem + 1;
}
}
// remove highlight before adding the new one,to avoid duplicates$(s.spans).remove();
s.links.removeClass(s.hlClass);
MLBContentslider.doPreviousNext(s.activeItem,s.pnItem);
return false;
}
);
}
,// below are the previous/next actionsdoPreviousNext:function (activeItem,pnItem){
s = this.settings;
$(s.spanHTML).appendTo("#thumbs ul li:nth-child(" + s.pnItem + ") a");
$("#thumbs ul li:nth-child(" + s.pnItem + ") a").addClass(s.hlClass);
$("#navigation ul li:nth-child(" + s.pnItem + ") a").addClass(s.hlClass);
// calculate the animated marginsif (s.pnItem > 1){
s.marginSetting = s.sliderWidth * s.pnItem - s.sliderWidth;
s.photoList.animate({
marginLeft:"-" + s.marginSetting + "px"}
,s.speed);
}
else{
s.photoList.animate({
marginLeft:"0px"}
,s.speed);
}
this.init(s.pnItem,objMLB);
}
,// Below are the auto-run actions// there's probably too much repeated here from other sections,but whateverdoAutoRun:function (){
s = this.settings;
s.currentView = $(s.hlLinks)[0].href.split("#")[1];
s.currentView = parseInt(s.currentView,10);
if (s.currentView === 6){
s.currentView = 1;
}
else{
s.currentView += 1;
}
s.thumbLinks.removeClass();
$(s.spans).remove();
s.navLinks.removeClass();
$("#thumbs ul li:nth-child(" + s.currentView + ") a").addClass(s.hlClass);
$("#navigation ul li:nth-child(" + s.currentView + ") a").addClass(s.hlClass);
$(s.hoverHTML).appendTo("#thumbs ul li:nth-child(" + s.currentView + ") a");
if (s.currentView > 1){
s.marginSetting = s.sliderWidth * s.currentView - s.sliderWidth;
s.photoList.animate({
marginLeft:"-" + s.marginSetting + "px"}
,s.speed);
}
else{
s.photoList.animate({
marginLeft:"0px"}
,s.speed);
}
this.init(s.currentView,objMLB);
}
,// play and pause the auto-run featuredoPlayPause:function (){
s = this.settings;
s.playPause.click(function (){
if ($(this).hasClass("pause")){
$(this).removeClass().addClass("play");
clearInterval(myTimer);
}
else{
$(this).removeClass().addClass("play pause");
clearInterval(myTimer);
myTimer = setInterval(function (){
MLBContentslider.doAutoRun();
}
,s.intervalPause);
}
return false;
}
);
}
}
;
// primary MLBContentslider namespace ends here// these are the function calls to trigger all the functionality// I have no idea if there is a better way to do thisMLBContentslider.init(currentItem,objMLB);
MLBContentslider.showThumbs();
MLBContentslider.doClick();
MLBContentslider.doHover();
MLBContentslider.prepPreviousNext();
myTimer = setInterval(function (){
MLBContentslider.doAutoRun();
}
,MLBContentslider.settings.intervalPause);
MLBContentslider.doPlayPause();
}
);
分享到QQ
分享到微博
微信扫一扫
