JQUERY实例：图片展示效果.doc

默认显示图例： 当鼠标放在第一张图片上的时候的图例： 我们来看看Html代码： HTML 代码div id=photoShow??? div class=photo??????? img src=p1.jpg?/??????? span张娜拉，韩国的/span??? /div??? div class=photo??????? img src=p2.jpg?/??????? spanMy Digital Story/span??? /div??? div class=photo??????? img src=p3.jpg?/??????? span不知道是什么图来的/span??? /div??? div class=photo??????? img src=p4.jpg?/??????? span我的Logo，Studio拼错了都不知道，汗一个。/span??? /div??? div class=photo??????? img src=p5.jpg?/??????? span四季图吧这是，但我分不清夏和秋/span??? /div??? /div/div 然后我们写一个CSS来控制一下这个HTML的样式,CSS比较菜，将就吧，达到效果就好： CSS#photoShow{}{??? border: solid 1px #C5E88E;??? overflow: hidden;?/**//*图片超出DIV的部分不显示*/??? width: 580px;??? height: 169px;??? background: #C5E88E;??? position: absolute;}.photo{}{??? position: absolute;??? top: 0px;??? width: 490px;??? height: 169px;}.photo img{}{??? width: 490px;??? height: 169px;}.photo span{}{??? padding: 5px 0px 0px 5px;??? 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(){ var imgDivs = $(#photoShowdiv); var imgNums = imgDivs.length; //图片数量 var divWidth = parseInt($(#photoShow).css(width)); //显示宽度 var imgWidth = parseInt($(.photoimg).css(width)); //图片宽度 var minWidth = (divWidth - imgWidth)/(imgNums-1); //显示其中一张图片时其他图片的显示宽度 var spanHeight = parseInt($(#photoShow.photo:firstspan).css(height)); //图片介绍信息的高度 imgDivs.each(function(i){ $(imgDivs[i]).css({z-index: i, left: i*(divWidth/imgNums)}); $(imgDivs[i]).hover(function(){ //处理鼠标进入的时候 },function(){ //处理鼠标离开的时候 }); }); }); 首先我们定义了一些变量，方便我们后面使用。 然后就是使用了一个 each() 的函数在每一个匹配的元素进行事件处理。这里是每一个div class=photo 元素分别进行事件的处理。 然后看一下下面这一句： $(imgDivs[i]).css({z-index: i, left: i*(divWidth/imgNums), top:0px}); 这句是通过CSS来控制每一个图片的层次和显示位置。 然后就是用一个 hover() 函数来处理鼠标的hover事件。 首先看一下鼠标