jQuery实例:图片展示效果
开始之前,我就喜欢先看一下效果:
http://www.cnblogs.com/QLeelulu/archive/2008/04/01/1133112.html
![](https://i-blog.csdnimg.cn/blog_migrate/af45f196a15e456df3e860f4eda1d9a9.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/d40bfa72a6124dd3b7dfe1cb32d9e62e.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/defd2dbc87e0159a96c07e6921c9643e.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/7b7acc8171026075b50882877632f38d.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/80a6a6410793eaa1f96c2cdbca3e853f.jpeg)
先看Html代码:
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
然后我们写一个CSS来控制一下这个HTML的样式,CSS比较菜,将就吧,达到效果就好:
css代码:
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
完成上面的准备工作后,我们下面开始jQuery代码。
首先就是做一些初始化的工作:
$(document).ready(function(){ var imgDivs = $("#photoShow>div"); var imgNums = imgDivs.length; //图片数量 var divWidth = parseInt($("#photoShow").css("width")); //显示宽度 var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度 var minWidth = (divWidth - imgWidth)/(imgNums-1); //显示其中一张图片时其他图片的显示宽度 var spanHeight = 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(){ //处理鼠标离开的时候 }); }); });
首先我们定义了一些变量,方便我们后面使用。 然后就是使用了一个 each() 的函数在每一个匹配的元素进行事件处理。这里是每一个<div class="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(){ var imgDivs = $("#photoShow>div"); var imgNums = imgDivs.length; //图片数量 var divWidth = parseInt($("#photoShow").css("width")); //显示宽度 var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度 var minWidth = (divWidth - imgWidth)/(imgNums-1); //显示其中一张图片时其他图片的显示宽度 var spanHeight = 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"); }); }); }); });
本人水平一般,代码还有待改善。