JQUERY实例：图片展示效果

3、式,CSS比较菜，将就吧，达到效果就好：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:490

4、px;   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;}完成上面的准备工作后，

5、我们下面开始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

6、-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(){//处理鼠标离开的时候});});});首先我们定义了

7、一些变量，方便我们后面使用。然后就是使用了一个each()的函数在每一个匹配的元素进行事件处理。这里是每一个元素分别进行事件的处理。然后看一下下面这一句：$(imgDivs[i]).css({"z-index":i,"left":i*(divWidth/imgNums),"top":"0px"});这句是通过CSS来控制每一个图片的层次和显示位置。然后就是用一个hover()函数来处理鼠标的hover事件。首先看一下鼠标进入图片的时候该怎么处理：$(imgDivs[i]).hover(function(){/

8、/$(this).find("img").css("opacity","1");$(this).find("span").stop().animate