需求如下：
（1）将尺寸不同的相片同意成宽度与高度相同的缩略图片，展示在页面中。
（2）当单机“点击放大”链接时，以动画的效果放大至其原始图片，同时，隐藏“点击放大”链接，显示该图的基本信息。
（3）当单机元素图片中的“关闭”按钮时，以动画的效果将图片缩小成单机前的缩略图，即返回发哦图片初始状态。
（4）在浏览放大后的原始图片时，又单机其他缩略图片，那么，处于放大状态的原始图片自动以动画的效果进行关闭，使得整个相册始终只有一个图片处于放大状态。
代码如下：
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <link rel="stylesheet" href="css_Animate.css" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> <script src="js_Animate.js" type="text/javascript"></script> </head> <body> <div class="p_Lst"> <img src="images/001.jpg" alt="" /> <div class="p_Alt"> <h3>图片1</h3> </div> </div> <div class="p_Lst"> <img src="images/002.jpg" alt="" /> <div class="p_Alt"> <h3>图片2</h3> </div> </div> <div class="p_Lst"> <img src="images/003.jpg" alt="" /> <div class="p_Alt"> <h3>图片3</h3> </div> </div> <div class="p_Lst"> <img src="images/004.jpg" alt="" /> <div class="p_Alt"> <h3>图片4</h3> </div> </div> </body> </html>
CSS
body {font-size:13px} /*图片外框样式*/ .p_Lst { position: relative; /*float: left;*/ width: 90px; height: 98px; padding: 8px; border: 1px solid #666; margin: 10px 8px 20px 8px; } /*图片最近外框样式*/ .p_Img { width: 90px; height: 90px; margin-bottom: 5px; overflow: hidden; } /*图片信息样式*/ .p_Alt { display:none; } /*缩略图片中“点击放大”链接样式*/ .p_Big { display: block; width: 90px; height: 23px; background: url(images/imgLarge.jpg); cursor: pointer; } /*原始放大图片中“关闭”按钮样式*/ .p_Cls { position: absolute; right: 10px; bottom: 10px; display: block; width: 20px; height: 21px; background: url(images/imgClose.jpg); text-indent: -9999px; }
JS
/// <reference path="jquery-1.4.2-vsdoc.js"/> /// <reference path="jquery-1.4.2.js"/> $(function() { var curIndex = -1; //初始化当前打开图片值 var intImgL = "-120px"; var intImgT = "-120px"; //带参数index遍历图片外框Div $(".p_Lst").each(function(index) { var $this = $(this); //获取每个外框Div var $img = $this.find("img"); //查找其中的图片元素 var $info = $this.find(".p_Alt"); //查询其中的图片信息元素 var arrPic = {}; //定义一个空数组保存初始的长与宽 arrPic.imgw = $img.width(); arrPic.imgh = $img.height(); arrPic.orgw = $this.width(); arrPic.orgh = $this.height(); $img.css({ //设置初始时的图片外边距位置 marginLeft: intImgL, marginTop: intImgT }); //将图片、点击放大链接、关闭按钮放入外框Div中 var $drag = $("<div class='p_Img'>").append($img).prependTo($this); var $open = $("<a href='javascript:void(0)' class='p_Big' title='点击放大'></a>").appendTo($this); var $clos = $("<a href='javascript:void(0)' class='p_Cls' title='点击关闭'></a>").appendTo($info); //保存放入元素后的外框Div的长与宽 arrPic.dragw = $drag.width(); arrPic.dragh = $drag.height(); //放大按钮单击事件 $open.click(function() { $this.animate({ //外框动画 arrPic.imgw, height: (arrPic.imgh + 85), //85是图片信息的高度, borderWidth: "5" }, 3000); $open.fadeOut(); //点击放大链接淡出 $(".p_Alt", $this).fadeIn(); //图片提示信息淡入 $drag.animate({ //加入图片后的Div框动画 arrPic.imgw, height: arrPic.imgh }, 3000); $img.animate({ //以动画的形式自动调整位置 marginTop: "0px", marginLeft: "0px" }, 3000); //获取当前被放大成原始图的图片各组成部分 var $f_this = $(".p_Lst:eq(" + curIndex + ")"); var $f_open = $(".p_Big:eq(" + curIndex + ")"); var $f_drag = $(".p_Img:eq(" + curIndex + ")"); var $f_larg = $(".p_Alt:eq(" + curIndex + ")"); var $f_imgs = $("img:eq(" + curIndex + ")"); if (curIndex != -1) { //如果当前有已放大的图片 //自动以动画的形式关闭该图片 cls_Click($f_this, $f_open, $f_drag, $f_imgs, $f_larg); } //重新获取当前放大图片的索引号 curIndex = index; }); //关闭按钮单击事件 $clos.click(function() { //以动画的形式缩小当前所点击的图片 cls_Click($this, $open, $drag, $img, 1); //初始化索引号 curIndex = -1; }); /* *@param 参数pF表示图片最外层Div *@param 参数pO表示图片点击前的放大按钮 *@param 参数pW表示紧邻图片层Div *@param 参数pI表示紧选中的图片元素 *@param 参数blnS表示图片中的说明内容 */ function cls_Click(pF, pO, pW, pI, blnS) { var $strInit; pF.animate({ arrPic.orgw, height: arrPic.orgh, borderWidth: "1" }, 3000); pO.fadeIn(); if (blnS) { $strInit = $(".p_Alt", pF); } else { $strInit = blnS; } $strInit.fadeOut(); pW.animate({ arrPic.dragw, height: arrPic.dragh }, 3000); pI.animate({ marginTop: intImgT, marginLeft: intImgL }, 3000); } }); })
结果如下图所示：
