以下是 jQuery水平滑动切换焦点图滑动滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>jQuery水平滑动切换焦点图</title>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<link href="css/global.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//JSON PORTFOLIO
var portfolioJSON = [{"0":"Mother's Ring Builder","4":"2013-03-25 20:00:50","1":"2013\/03\/mothers.jpg","3":"191"},{"0":"BCI Rentals - Custom CMS","4":"2012-10-28 19:24:24","1":"2013\/03\/bci.jpg","3":"201"},{"0":"Schoolwires Creative Services","4":"2012-03-07 03:07:55","1":"2012\/03\/creative.jpg","2":"#FFFFFF","3":"82"},{"0":"Self-Service","4":"2012-03-06 16:43:34","1":"2012\/03\/selfservice11.jpg","2":"#669900","3":"4"},{"0":"Portfolio: \"Infinite Scolling\" Wall","4":"2012-03-05 16:44:51","1":"2012\/03\/portfolio1.jpg","2":"#304B89","3":"176"}];
var featuresTimer;
var resizeTimer;
var hoverTimer;
</script>
<script type="text/javascript" src="js/features.js"></script>
<script type="text/javascript" src="js/global.js"></script>
</head>
<body>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div id="pagewrap">
<div id="ajax-container">
<div id="ajax-relative"></div>
</div>
<div id="content-outer">
<div class="content-container home">
<link href="css/features.css" rel="stylesheet" type="text/css">
<div id="features-container">
<div id="glow-container">
<div id="glow-color-active" style="background-color:"></div>
<img id="glow-fg" src="images/glow-fg.png" />
</div>
<h1 id="frame-title">Featured Projects</h1>
<div class="frame-smaller-outer left">
<div class="frame-smaller-inner">
<div class="slider">
<img src='images/selfservice11.jpg' /><img src='images/portfolio1.jpg' /><img src='images/mothers.jpg' /><img src='images/bci.jpg' /><img src='images/creative.jpg' /><img src='images/selfservice11.jpg' /><img src='images/portfolio1.jpg' /><img src='images/mothers.jpg' /> </div>
</div>
</div>
<div class="frame-smaller-outer right">
<div class="frame-smaller-inner">
<div class="slider">
<img src='images/selfservice11.jpg' /><img src='images/portfolio1.jpg' /><img src='images/mothers.jpg' /><img src='images/bci.jpg' /><img src='images/creative.jpg' /><img src='images/selfservice11.jpg' /><img src='images/portfolio1.jpg' /><img src='images/mothers.jpg' /> </div>
</div>
</div>
<img id="frame-center-shadow" src="images/frame-shadow.png" />
<div id="frame-center-outer">
<div id="frame-center-inner">
<div class="slider">
<a href='#'><span class='title'>Self-Service</span><span class='more'>view more</span><span class='image-holder'><img src='images/selfservice11.jpg' /></span></a><a href='#'><span class='title'>Portfolio: "Infinite Scolling" Wall</span><span class='more'>view more</span><span class='image-holder'><img src='images/portfolio1.jpg' /></span></a><a href='#'><span class='title'>Mother's Ring Builder</span><span class='more'>view more</span><span class='image-holder'><img src='images/mothers.jpg' /></span></a><a href='#'><span class='title'>BCI Rentals - Custom CMS</span><span class='more'>view more</span><span class='image-holder'><img src='images/bci.jpg' /></span></a><a href='#'><span class='title'>Schoolwires Creative Services</span><span class='more'>view more</span><span class='image-holder'><img src='images/creative.jpg' /></span></a><a href='#'><span class='title'>Self-Service</span><span class='more'>view more</span><span class='image-holder'><img src='images/selfservice11.jpg' /></span></a><a href='#'><span class='title'>Portfolio: "Infinite Scolling" Wall</span><span class='more'>view more</span><span class='image-holder'><img src='images/portfolio1.jpg' /></span></a><a href='#'><span class='title'>Mother's Ring Builder</span><span class='more'>view more</span><span class='image-holder'><img src='images/mothers.jpg' /></span></a> <pre>-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50);</pre>
</div>
</div>
</div>
<div class="nav-arrow back"></div>
<div class="nav-arrow next"></div>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(features.js):
// jQueryJoel.com homepage featured slider// Author:Joel Grannas - Last updated 2/29/2012var portLength = portfolioJSON.length;
var active = 0;
var imageWidth;
var imageHeight;
var smallImageWidth = 0;
var screenWidth = $(window).width();
$(window).resize(function(){
//CHECKS FOR SMALLER SIZING,IF SO RESET LEFT POSITIONINGvar currentLargeWidth = $("#frame-center-inner .slider img:first").width();
var currentLargeHeight = $("#frame-center-inner .slider img:first").height();
var currentSmallWidth = $(".frame-center-outer.left img:first").width();
screenWidth = $(window).width();
//RESET LEFT POSif(imageWidth != currentLargeWidth){
var resetLeft = ((active + 2) * -1) * currentLargeWidth;
$("#frame-center-inner .slider").css("left",resetLeft);
var smallWidth = $(".frame-smaller-inner .slider img:first").width();
var resetLeft2 = ((active + 1) * -1) * smallWidth;
$(".frame-smaller-outer.left .slider").css("left",resetLeft2);
var resetLeft3 = ((active + 3) * -1) * smallWidth;
$(".frame-smaller-outer.right .slider").css("left",resetLeft3);
imageWidth = currentLargeWidth;
imageHeight = currentLargeHeight;
smallImageWidth = currentSmallWidth;
}
if(screenWidth < 1025){
noHover();
}
else{
hoverSlides();
}
//STOP ANIMATE//stopFeatures();
}
);
$(document).ready(function(){
//SETS VARIABLE FOR IMAGE SIZE$("#frame-center-inner .slider img:first").load(function(){
imageWidth = $(this).width();
imageHeight = $(this).height();
//SETS HOVER BASED ON SCREENWIDTHif(screenWidth < 1025){
noHover();
}
else{
hoverSlides();
}
//RUNS ROTATE//playFeatures();
}
);
$(".frame-smaller-outer .slider img:first").load(function(){
smallImageWidth = $(this).width();
}
);
$(".nav-arrow.next").click(function(){
active++;
if(active == portfolioJSON.length){
active = 0;
}
glowColor(portfolioJSON[active][2]);
$(".slider").each(function(){
var mySize = $("img:first",this).width();
var moveCalc = "-=" + mySize;
var maxVal = (($("img",this).length-1) * mySize * -1);
$(this).animate({
"left":moveCalc}
,500,function(){
var myCurrentLeft = $(this).position().left;
if(myCurrentLeft == maxVal){
var myLeft = myCurrentLeft + (portLength*mySize) + "px";
$(this).css("left",myLeft);
}
}
);
}
);
}
);
$(".nav-arrow.back").click(function(){
active--;
if(active < 0){
active = portfolioJSON.length - 1;
}
glowColor(portfolioJSON[active][2]);
$(".slider").each(function(){
var mySize = $("img:first",this).width();
var moveCalc = "+=" + mySize;
$(this).animate({
"left":moveCalc}
,500,function(){
if($(this).position().left == 0){
var myLeft = (portLength * -1 * mySize) + "px";
$(this).css("left",myLeft);
}
}
);
}
);
}
);
}
);
function hoverSlides(){
$("#frame-center-inner .slider a").each(function(){
$(this).bind("mouseenter",function(){
imageHeight = $("img:first",this).height();
var topVal = imageHeight * .08;
var hVal = imageHeight - (topVal * 2);
$(".image-holder",this).stop().animate({
"top":topVal,"height":hVal}
,300);
}
);
$(this).bind("mouseleave",function(){
$(".image-holder",this).stop().animate({
"top":0,"height":imageHeight}
,300,function(){
$(this).removeAttr("style");
}
);
}
);
}
);
/*$("#features-container").hover(function(){
stopFeatures();
clearTimeout(hoverTimer);
}
,function(){
hoverTimer = setTimeout(function(){
playFeatures();
}
,3000);
}
);
*/
}
function noHover(){
$("#frame-center-inner .slider a").unbind("mouseenter").unbind("mouseleave");
$("#frame-center-inner .slider .image-holder").removeClass("large");
}
function glowColor(nextColor){
$("#glow-container").css("background-color",nextColor);
$("#glow-color-active").fadeOut(500,function(){
$(this).css("background-color",nextColor).show();
}
);
}
function loadWP(pageNum){
alert("run load WP Page");
var pageLoc = "blog/?p=" + pageNum;
$.ajax({
url:pageLoc,success:function(data){
var pClass = "content-container wp-page" + pageNum;
var pClass2 = ".wp-page" + pageNum;
$("#content",data).attr("class",pClass).css("height","0px");
alert(data);
$("#content-outer").append($(pClass2,data));
$(pClass2).addClass("active");
openAnimate();
}
}
);
}
function stopFeatures(){
clearInterval(featuresTimer);
}
function playFeatures(){
featuresTimer = setInterval(function (){
$(".nav-arrow.next").click();
}
,4000)}
JS代码(global.js):
// jQueryJoel Global Javascript// Author:Joel Grannas - Last updated 2/29/2012$(document).ready(function(){
//HEADERif($("#features-container").length){
$(".nav-item:eq(0)").addClass("active");
}
if($(".portfolio").length || $(".category-projects").length){
$(".nav-item:eq(1)").addClass("active");
}
if($(".category-labs").length){
$(".nav-item:eq(2)").addClass("active");
}
if($(".content-container.about").length){
$(".nav-item:eq(3)").addClass("active");
}
if($(".content-container.contact").length){
$(".nav-item:eq(4)").addClass("active");
}
if(!$.browser.msie){
//setupAJAX();
}
//FOOTER$("a.social").hover(function(){
$(".hover-overlay",this).stop().css("opacity","0").show().animate({
"opacity":1}
,500);
}
,function(){
$(".hover-overlay",this).stop().animate({
"opacity":0}
,500,function(){
$(this).hide();
}
);
}
);
}
);
//AJAX LINKS / ETCfunction setupAJAX(){
//LOAD AJAX STYLESHEET$('head').append('<link rel="stylesheet" href="ajax.css" type="text/css" />');
//SETUP MAIN NAV LINKS$(".nav-item").click(function(e){
e.preventDefault();
if(!$(this).hasClass("active")){
//IF NOT ALREADY ACTIVE$(".nav-item").removeClass("active");
$(this).addClass("active");
var myPageLoc = $("a",this).attr("href");
var myPageName = $("a",this).attr("title");
$(".content-container").animate({
"height":0}
,500,function(){
//CLEAR THE ACTIVE PAGE(S)$(".content-container").addClass("closed");
var activeContainer = ".content-container." + myPageName;
if($(activeContainer).length){
$(activeContainer).addClass("active");
openAnimate();
}
else{
//AJAX IN PAGE THEN ANIMATE$("#content-outer").load(myPageLoc + " .content-container",function(){
alert($(this).html());
openAnimate();
}
);
}
}
);
}
}
);
}
//OPEN ANIMATION FUNCTIONfunction openAnimate(){
$(".content-container.active").animate({
"height":800}
,500,function(){
$(this).removeAttr("style");
}
);
}
//TWITTERfunction getTweets(){
$.getJSON("http://twitter.com/statuses/user_timeline.json?screen_name=jQueryJoel&count=3&callback=?",function (a){
$.each(a,function (a,b){
ct = b.text;
ct = ct.replace(/http:\/\/\S+/g,"<a href='$&' target='_blank'>$&</a>");
ct = ct.replace(/\s(@)(\w+)/g," @<a onclick='javascript:pageTracker._trackPageview('/outgoing/twitter.com/');
' href='http://twitter.com/$2' target='_blank'>$2</a>");
ct = ct.replace(/\s(#)(\w+)/g," #<a onclick='javascript:pageTracker._trackPageview('/outgoing/search.twitter.com/search?q=%23');
' href='http://search.twitter.com/search?q=%23$2' target='_blank'>$2</a>");
$("#js-tweets").append("<li class='tweet'>" + ct + "</li>")}
)}
)}
window.onload = function(){
//IF ON HP RUN TWITTERif($("#features-container").length){
getTweets();
}
}
CSS代码(global.css):
@charset "UTF-8";/* GLOBAL - BEGIN */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{margin:0px;padding:0px;background:#0D0D0D;/*font-family:'Avenir LT W01 35 Light';*/
font-family:'Avenir LT W01 55 Roman';font-size:12px;}
.joel-clear:after{content:".";visibility:hidden;clear:both;height:0px;display:block;}
.hidden{display:none;}
#pagewrap{position:relative;}
img{border:0;}
.column{float:left;}
a,a:visited{color:#FFF;text-decoration:none;}
a:hover{text-decoration:underline;}
/* GLOBAL - END */
/* HEADER ITEMS - BEGIN */
#header-outer{width:100%;background:#FFF;border-bottom:5px solid #404040;overflow:hidden;}
#header-inner{position:relative;margin:0px auto;width:960px;height:100px;}
#header-inner hgroup{position:absolute;top:25px;left:10px;}
#header-inner h1{margin:0px;font-size:28px;line-height:33px;color:#000;letter-spacing:2px;text-transform:uppercase;font-weight:normal;}
#header-inner h6{margin:0px;font-size:12px;line-height:14px;color:#000;letter-spacing:4px;text-transform:uppercase;font-weight:normal;}
/* HEADER ITEMS - END */
/* NAV - BEGIN */
#nav-list{position:absolute;top:40px;right:0px;list-style:none;margin:0px;padding:0px;}
.nav-item{display:inline-block;zoom:1;*display:inline;margin-right:20px;font-size:18px;line-height:22px;}
.nav-item.last{margin-right:0px;}
.nav-item a{color:#000;display:block;text-transform:uppercase;text-decoration:none;padding:4px 10px;font-family:'Avenir LT W01 35 Light',sans-serif;}
.nav-item:hover{background:#F6F6F6;border-radius:8px;}
.nav-item.active{background:#E8E8E8;border-radius:8px;}
/* NAV - END */
/* CONTENT AREA - BEGIN */
#content-outer{width:100%;overflow:hidden;background:#000;}
.content-container{overflow:hidden;}
/* CONTENT AREA - END */
/* FOOTER AREA - BEGIN */
#footer-outer{border-top:5px solid #1A1A1A;background:#0D0D0D;width:100%;}
#footer-inner{width:960px;height:auto;padding:30px 0px;margin:0px auto;}
#footer-left{float:left;width:70%;}
#footer-right{float:left;width:30%;text-align:right;color:#666;}
a.social{position:relative;display:inline-block;width:125px;height:40px;text-decoration:none;}
a.social .social-icon{position:absolute;top:0px;left:0px;width:25px;height:25px;background:url(social-twitter-sprite.png) no-repeat top left;}
a.social.facebook .social-icon{background-image:url(social-facebook-sprite.png);}
a.social.linkedin .social-icon{background-image:url(social-linkedin-sprite.png);}
a.social.screenr .social-icon{background-image:url(social-screenr-sprite.png);}
a.social .social-text{position:absolute;top:0px;left:34px;width:91px;height:25px;}
a.social .social-text .social-line1{font-family:'Avenir LT W01 35 Light',sans-serif;font-size:10px;opacity:.45;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";filter:alpha(opacity=45);position:absolute;top:-1px;left:0px;}
a.social .social-text .social-line2{font-size:15px;opacity:.65;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";filter:alpha(opacity=65);position:absolute;top:9px;left:0px;text-transform:uppercase;}
a.social:hover .social-text .social-line1{opacity:.75;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";filter:alpha(opacity=75);}
a.social:hover .social-text .social-line2{opacity:.95;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";filter:alpha(opacity=95);}
a.social .hover-overlay{display:none;position:absolute;top:0px;left:0px;width:125px;height:40px;background:url(social-glow.png) no-repeat bottom left;}
a.social .hover-overlay .color-icon{position:absolute;top:0px;left:0px;width:25px;height:25px;background:url(social-twitter-sprite.png) no-repeat 0px -25px;}
a.social.facebook .hover-overlay .color-icon{background-image:url(social-facebook-sprite.png);}
a.social.linkedin .hover-overlay .color-icon{background-image:url(social-linkedin-sprite.png);}
a.social.screenr .hover-overlay .color-icon{background-image:url(social-screenr-sprite.png);}
#footer-right a,#footer-right a:visited{color:#979797;font-weight:bold;text-decoration:none;}
#footer-right a:hover{color:#FFF;text-decoration:underline;}
a.social.linkedin{margin-left:20px;}
/* FOOTER AREA - END */
/* BEGIN - CONDITIONAL CSS */
@media only screen and (max-width:1023px){/* HEADER ITEMS - BEGIN */
#header-inner{width:100%;height:100px;overflow:hidden;}
#header-inner hgroup{position:relative;margin:0px auto;top:auto;left:auto;}
#header-inner h1{text-align:center;padding-top:20px;}
#header-inner h6{display:none;}
/* HEADER ITEMS - END */
/* NAV - BEGIN */
nav{margin:0px auto;text-align:center;}
#nav-list{position:relative;top:auto;left:auto;right:auto;margin:0px auto;margin:0px auto;padding:5px 0px 15px;width:auto;display:inline-block;}
.nav-item{font-size:14px;line-height:18px;}
/* NAV - END */
/* FOOTER AREA - BEGIN */
#footer-inner{width:100%;}
#footer-left{width:77%;margin-left:3%;}
#footer-right{width:17%;margin-right:3%;}
/* FOOTER AREA - END */
}
@media only screen and (max-width:768px){#footer-left{float:none;width:300px;text-align:center;margin:0px auto;}
#footer-right{float:none;width:300px;text-align:center;margin:0px auto;}
a.social.linkedin{margin-left:0px;}
.nav-item{margin-right:5px;font-size:12px;line-height:14px;}
}
@media only screen and (max-width:480px){html{-webkit-text-size-adjust:none;}
.nav-item{margin-right:0px;font-size:11px;}
}
@media only screen and (max-width:320px){}
/* END - CONDITIONAL CSS */
分享到QQ
分享到微博
微信扫一扫
