html5图片滚动csdn,jQuery水平滑动焦点图插件

本文作者html5tricks，转载请注明出处

这又是一款基于jQuery的焦点图插件，前面我们也分享过很多优秀的

接下来我们来看看实现这款jQuery水平滑动焦点图的方法和源码，代码主要由HTML、CSS以及jQuery组成，总体来说实现思路比较简单。

HTML代码：

Featured Projects

HTML代码的结构非常清晰，先是构造一个展示图片的容器，然后是左右两个按钮，用来切换上一张和下一张图片。

CSS代码：

#frame-center-inner .slider a .image-holder {

position:absolute;

top:0px;

left:0px;

width:640px;

height:400px;

overflow:hidden;

}

#frame-center-inner .slider a img {

display:block;

width:640px;

}

.frame-smaller-outer {

position:absolute;

top:150px;

left:-40px;

width:390px;

height:248px;

background:url(frame-bg.png) repeat-x top left;

opacity:0.45;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";

filter: alpha(opacity=45);

}

.frame-smaller-outer.right {

left:auto;

right:-40px;

}

.frame-smaller-outer.left .slider {

/* -1X Small Image width */

left:-380px;

}

#frame-center-inner .slider {

/* -2X Large Image width */

left:-1280px;

}

.frame-smaller-outer.right .slider {

/* -3X Small Image width */

left:-1140px;

}

.frame-smaller-inner {

position:absolute;

top:5px;

left:5px;

width:380px;

height:238px;

overflow:hidden;

}

.frame-smaller-inner .slider {

position:absolute;

top:0px;

left:0px;

width:3800px;

height:238px;

}

.frame-smaller-inner .slider img {

display:block;

float:left;

width:380px;

}

.nav-arrow {

position:absolute;

top:230px;

left:70px;

width:51px;

height:88px;

background:url(frame-arrows.png) no-repeat top left;

opacity:0.6;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

filter: alpha(opacity=60);

z-index:6;

cursor:pointer;

}

.nav-arrow.next {

left:auto;

right:70px;

background-position: top right;

}

.nav-arrow:hover {

opacity:1;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

}

这里用了CSS滤镜来实现图片投影的特效，这样让焦点图更具有立体感，其它的CSS代码也没有什么特别的地方。

jQuery代码：

var 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 POSITIONING

var 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 POS

if(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 SCREENWIDTH

if(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)

}