jQuery实例：图片展示效果

HTML代码

<divid="photoShow">

<divclass="photo">

<imgsrc="p1.jpg"/>

<span>张娜拉，韩国的</span>

</div>

<divclass="photo">

<imgsrc="p2.jpg"/>

<span>MyDigitalStory</span>

</div>

<divclass="photo">

<imgsrc="p3.jpg"/>

<span>不知道是什么图来的</span>

</div>

<divclass="photo">

<imgsrc="p4.jpg"/>

<span>我的Logo，Studio拼错了都不知道，汗一个。</span>

</div>

<divclass="photo">

<imgsrc="p5.jpg"/>

<span>四季图吧这是，但我分不清夏和秋</span>

</div>

</div>

</div>

CSS

#photoShow{}{

border:solid1px#C5E88E;

overflow:hidden;/**//*图片超出DIV的部分不显示*/

width:580px;

height:169px;

background:#C5E88E;

position:absolute;

}

.photo{}{

position:absolute;

top:0px;

width:490px;

height:169px;

}

.photoimg{}{

width:490px;

height:169px;

}

.photospan{}{

padding:5px0px0px5px;

width:490px;

height:30px;

position:absolute;

left:0px;

bottom:-32px;/**//*介绍内容开始的时候不显示*/

background:black;

filter:alpha(opacity=50);/**//*IE透明*/

opacity:0.5;/**//*FF透明*/

color:#FFFFFF;

}

完成上面的准备工作后，我们下面开始jQuery代码。
首先就是做一些初始化的工作：

$(document).ready(function(){

	varimgDivs=$("#photoShow>div");

	varimgNums=imgDivs.length;//图片数量

	vardivWidth=parseInt($("#photoShow").css("width"));//显示宽度

	varimgWidth=parseInt($(".photo>img").css("width"));//图片宽度

	varminWidth=(divWidth-imgWidth)/(imgNums-1);//显示其中一张图片时其他图片的显示宽度

	varspanHeight=parseInt($("#photoShow>.photo:first>span").css("height"));//图片介绍信息的高度

	imgDivs.each(function(i){

		$(imgDivs[i]).css({"z-index":i,"left":i*(divWidth/imgNums)});

		$(imgDivs[i]).hover(function(){

			//处理鼠标进入的时候

		},function(){

			//处理鼠标离开的时候

		});

	});

});

[code]首先我们定义了一些变量，方便我们后面使用。

然后就是使用了一个each()的函数在每一个匹配的元素进行事件处理。这里是每一个<divclass="photo">元素分别进行事件的处理。

然后看一下下面这一句：

$(imgDivs[i]).css({"z-index":i,"left":i*(divWidth/imgNums),"top":"0px"});

这句是通过CSS来控制每一个图片的层次和显示位置。

然后就是用一个hover()函数来处理鼠标的hover事件。

首先看一下鼠标进入图片的时候该怎么处理：

$(imgDivs[i]).hover(function(){

	//$(this).find("img").css("opacity","1");

	$(this).find("span").stop().animate({bottom:0},"slow");

	imgDivs.each(function(j){

		if(j<=i){

			$(imgDivs[j]).stop().animate({left:j*minWidth},"slow");

		}else{

			$(imgDivs[j]).stop().animate({left:(j-1)*minWidth+imgWidth},"slow");

		}

	});

},function(){

	//处理鼠标离开时候的事件

});

在这里所有的动画效果都是通过animate()函数修改CSS来控制元素的显示位置来实现的。

这里注意一下就是在调用animate()函数前都调用了stop()函数。stop()函数是用来停止当前元素的所有执行中的事件。

j<=i的判断就是判断鼠标hover的当前图片和该图片前面的图片与该图片后面的图片的分割线。

鼠标离开的处理也差不多，下面之完整的代码：

$(document).ready(function(){

	varimgDivs=$("#photoShow>div");

	varimgNums=imgDivs.length;//图片数量

	vardivWidth=parseInt($("#photoShow").css("width"));//显示宽度

	varimgWidth=parseInt($(".photo>img").css("width"));//图片宽度

	varminWidth=(divWidth-imgWidth)/(imgNums-1);//显示其中一张图片时其他图片的显示宽度

	varspanHeight=parseInt($("#photoShow>.photo:first>span").css("height"));//图片介绍信息的高度

	imgDivs.each(function(i){

		$(imgDivs[i]).css({"z-index":i,"left":i*(divWidth/imgNums)});

		$(imgDivs[i]).hover(function(){

			//$(this).find("img").css("opacity","1");

			$(this).find("span").stop().animate({bottom:0},"slow");

			imgDivs.each(function(j){

				if(j<=i){

					$(imgDivs[j]).stop().animate({left:j*minWidth},"slow");

				}else{

					$(imgDivs[j]).stop().animate({left:(j-1)*minWidth+imgWidth},"slow");

				}

			});

		},function(){

			imgDivs.each(function(k){

				//$(this).find("img").css("opacity","0.7");

				$(this).find("span").stop().animate({bottom:-spanHeight},"slow");

				$(imgDivs[k]).stop().animate({left:k*(divWidth/imgNums)},"slow");

			});

		});

	});

});

分享给大家.