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

默认显示图例：当鼠标放在第一张图片上的时候的图例：我们来看看Html代码：HTML 代码 张娜拉，韩国的 My Digital Story 不知道是什么图来的 我的Logo，Studio拼错了都不知道，汗一个。 四季图吧这是，但我分不清夏和秋 然后我们写一个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)$(imgDivsi).css(z-index: i, left: i*(divWidth/imgNums);$(imgDivsi).hover(function()/处理鼠标进入的时候,function()/处理鼠标离开的时候);););首先我们定义了一些变量，方便我们后面使用。然后就是使用了一个 each() 的函数在每一个匹配的元素进行事件处理。这里是每一个 元素分别进行事件的处理。然后看一下下面这一句：$(imgDivsi).css(z-index: i, left: i*(divWidth/imgNums), top:0px);这句是通过CSS来控制每一个图片的层次和显示位置。然后就是用一个 hover() 函数来处理鼠标的hover事件。首先看一下鼠标进入图片的时候该怎么处理：$(imgDivsi).hover(function()/$(this).find(img).css(opacity,1);$(this).find(span).stop().animate(bottom: 0, slow);imgDivs.each(function(j)if(j=i)$(imgDivsj).stop().animate(left: j*minWidth, slow);else$(imgDivsj).stop().animate(left: (j-1)*minWidth+imgWidth, slow););,function()/处理鼠标离开时候的事件);在这里所有的动画效果都是通过 animate() 函数修改CSS来控制元素的显示位置来实现的。这里注意一下就是在调用 animate() 函数前都调用了 stop() 函数。stop() 函数是用来停止当前元素的所有执行中的事件。jdiv);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)$(imgDivsi).css(z-index: i, left: i*(divWidth/imgNums);$(imgDivsi).hover(function()/$(this).find(img).css(opacity,1);$(this).find(span).stop().animate(bottom: 0, slow);imgDivs.each(function(j)if(j=i)$(imgDivsj).stop().animate(left: j*minWidth, slow);else$(imgDivsj).stop().animate(left: (j-1)*minWidth+imgWidth, slow););,function()imgDivs.each(function(k)/$(this).find(img).css(opacity,0.7