jQuery综合案例分析——动画效果浏览相册中的图片_优品建站

jQuery综合案例分析——动画效果浏览相册中的图片

一. 需求分析
  经分析，该案例的需求如下：
  1）将尺寸不同的相片统一成宽度与高度相同的缩略图片，展示在页面中。
  2）当单击“点击放大”链接时，以动画的效果放大至其原始图片，同时，隐藏“点击放大”链接，显示该图的基本信息。
  3）当点击原始图片中的“关闭”按钮时，以动画的效果将图片缩小成单击前的缩略图，即返回到图片初始状态。
  4）在浏览放大后的原始图片时，又单击其他缩略图片，那么，处于放大状态的原始图片自动以动画的效果进行关闭，使得整个相册始终只有一个图片处于放大状态。
二． 界面效果
该案例的界面效果如下所示。
  1）将不同尺寸的相片形成统一的缩略图片显示在页面中，即相册初始化，如图5-12所示。

图5-12 相册初始化
  2）当单击某一个图片的“点击放大”链接后，该图片以动画的效果进行放大，并展示该图片的基本信息，如图5-13所示。
图5-13 图片放大后的效果
  3）在图5-13中，如果再单击其他图片的“点击放大”链接时，将自动以动画的效果缩小当前已放大的图片，并同时放大单击过的图片，其切换状态如图5-14所示。
图5-14 自动以动画效果缩小已放大的图片
  4）单击放大后图片中的“关闭”链接时，将以动画效果缩小该图片，效果如图5-15所示。
图5-15 单击“关闭”链接后，以动画效果缩小图片
三． 功能实现
  在该项目中，新建一个HTML文件listImg.html,加入如代码清单5-12所示的代码。
代码清单5-12 相册中的动画效果

<!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">
<head>
    <title>动画方式浏览图片</title>
    <link type="text/css" href="Css/css_Animate.css"
          rel="Stylesheet" />
    <script type="text/javascript"
            src="Jscript/js_Animate.js"></script>
</head>
<body>
    <div class="p_Lst">
<img  alt=""src="images/list_1.jpg" />
         <div class="p_Alt">
               <h3>风景一</h3>
         </div>
    </div>
    <div class="p_Lst">
         <img  alt=""src="images/list_2.jpg"/>
         <div class="p_Alt">
               <h3>风景二</h3>
         </div>
     </div>
     <div class="p_Lst">
          <img  alt=""src="images/list_3.jpg"/>
          <div class="p_Alt">
               <h3>风景三</h3>
          </div>
     </div>
     <div class="p_Lst">
             <img  alt=""src="images/list_4.jpg"/>
             <div class="p_Alt">
                  <h3>风景四</h3>
             </div>
     </div>
</body>
</html>
  为了代码的调用方便和后续维护的快捷，在HTML中，单独调用了两个辅助文件，一个是用于控制页面样式的CSS文件css_Animate.css，另外一个是用于实现页面功能的JS文件js_Animate.js。这两个文件的代码参见代码清单5-13和代码清单5-14。
代码清单5-13 CSS文件css_Animate.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;
}
代码清单5-14 JS文件js_Animate.js

/// <reference path="jquery-1.8.2.min.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({ //外框动画
               width: arrPic.imgw,
               height: (arrPic.imgh + 85), //85是图片信息的高度
               borderWidth: "5"
           }, 3000);
           $open.fadeOut(); //点击放大链接淡出
           $(".p_Alt", $this).fadeIn(); //图片提示信息淡入
           $drag.animate({ //加入图片后的Div框动画
               width: 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({
              width: arrPic.orgw,
              height: arrPic.orgh,
              borderWidth: "1"
          }, 3000);
          pO.fadeIn();
          if (blnS) {
              $strInit = $(".p_Alt", pF);
          } else {
              $strInit = blnS;
          }
          $strInit.fadeOut();
          pW.animate({
              width: arrPic.dragw,
              height: arrPic.dragh
          }, 3000);
          pI.animate({
              marginTop: intImgT,
              marginLeft: intImgL
          }, 3000);
       }
    });
})
四． 代码分析
  在js_Animate.js文件中，为了实现各相册中的图片单击放大查看的动画效果，先带参数
  index遍历整个图片最外框的Div元素，其代码如下：

$(".p_Lst").each(function(index) {//执行代码部分
...
})
  在遍历过程中，先获取设置好的外框与图片的长与宽，并将改变后的图片和相关元素先放入类别为“p_Img”的Div中，然后全部放入最外框的Div元素中，从而完成图片初始化的页面效果。其代码如下：

...省略部分代码
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();
...省略部分代码
  当单击图片初始状态中的“点击放大”链接时，首先，以3000毫秒的速度放大图片最外框Div元素，接着以同样的速度放大最近一层包含图片的Div，与此同时，以同样的速度显示或隐藏相应的页面内容，其代码如下：

...省略部分代码
$this.animate({ //外框动画
    width: arrPic.imgw,
    height: (arrPic.imgh + 85), //85是图片信息的高度
    borderWidth: "5"
}, 3000);
$open.fadeOut(); //点击放大链接淡出
$(".p_Alt", $this).fadeIn(); //图片提示信息淡入
$drag.animate({ //加入图片后的Div框动画
    width: arrPic.imgw,
    height: arrPic.imgh
}, 3000);
$img.animate({ //以动画的形式自动调整位置
    marginTop: "0px",
    marginLeft: "0px"
}, 3000);
...省略部分代码
  为了在单击“点击放大”链接时，缩小正在放大的图片，使仅有一个图片处于放大显示状态中，首先，需要获取当前处于放大显示图片的索引号，然后，根据该索引号获取图片的各个组成部分，再将这些部分以动画效果进行缩小。
  根据上述原理，定义一个公用变量curIndex，用于记录当前放大显示的图片索引号，并赋初始值为-1，当首次单击“点击放大”链接时，由于curIndex等于-1，因此不执行缩小的操作。这时，再通过下面代码记录当前放大的图片索引号：

curIndex = index;
  当再次单击另一个“点击放大”链接时，将根据该索引号，获取图片的各个组成部分，并执行缩小的动画效果操作，其代码如下：

...省略部分代码
//获取当前被放大成原始图的图片各组成部分
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赋值为-1，表示没有放大的原始图片，其代码如下：

...省略部分代码
//以动画的形式缩小当前所点击的图片
cls_Click($this, $open, $drag, $img, 1);
//初始化索引号
curIndex = -1;
...省略部分代码
  由于图片在放大与缩小时，都执行某项同样的操作，因此，将该项操作自定义为一个函数cls_Click()。该函数的功能是根据图片的各个组成部分，以同样的速度，采用动画的效果，缩小所选的图片，其代码如下所示：

...省略部分代码
/*
*@param 参数pF表示图片最外层Div
*@param 参数pO表示图片点击前的放大按钮
*@param 参数pW表示紧邻图片层Div
*@param 参数pI表示紧选中的图片元素
*@param 参数blnS表示图片中的说明内容
*/
function cls_Click(pF, pO, pW, pI, blnS) {
    var $strInit;
    pF.animate({
        width: arrPic.orgw,
        height: arrPic.orgh,
        borderWidth: "1"
    }, 3000);
    pO.fadeIn();
    if (blnS) {
        $strInit = $(".p_Alt", pF);
    } else {
        $strInit = blnS;
    }
    $strInit.fadeOut();
    pW.animate({
        width: arrPic.dragw,
        height: arrPic.dragh
    }, 3000);
    pI.animate({
        marginTop: intImgT,
        marginLeft: intImgL
    }, 3000);
  }
...省略部分代码

  • PHP+Ajax+Jquery实用案例用户相册
    相册是网站用户中心常见的功能之一。本任务将在用户中心项目中开发一个相册功能，实现用户创建相册、上传图片。在实现功能时，要求程序支持在相册中创建子相册，任何一个相册中都可以上传图片。通过实现本任务，介绍PHP处理文件和目录的一些常用函数。
  • Jquery EasyUI组件实战：购物车的拖放
    本文将向读者演示如何利用拖放和放置组件开发一个购物车程序。该程序允许用户将商品拖放到购物车内，并在购物车内显示商品的名称、单价以及数量，最后统计购物车内物品的总价。
  • jquery easyUI通过回车键快速移动光标
    由于用户名和密码都要设置按键操作，因此使用函数方式大大减少了代码量。以用户名编辑框的keydown为例：如果按回车键，焦点将移动到password输入框；如果按“Shift+回车”组合键，焦点将移动到button也就是登录按钮。
  • jquery综合案例分析——删除数据时的提示效果在项目中的应用
    jquery综合案例分析——删除数据时的提示效果在项目中的应用
  • jquery综合案例分析——数据删除和图片预览在项目中的应用
    经分析，该案例的需求如下：1）在页面中创建一个表格，用于展示多项数据信息，各行间采用隔行变色的方法展示每一行的数据。2）如果选中表格中某行的复选项，并单击表格下面的“删除”按钮，那么将删除其选中的行；选中“全选”复选框后，再次单击“删除”按钮时，将删除表格的全部行数据。3）如果将鼠标移到表格中某行的小图片上，将在该图片的右下角出现一幅与之相对应的大图片，用以实现图片预览的效果。
  • 利用jQuery脚本DIY闪光灯效果
    在电影的开头常常会播放一段非常简短但是又特别炫目的动画来吸引观众的注意力，笔者一直对这样炫目的镜头向往不已，但是这些效果都需要专业人士通过专业的设备来完成，这不免令人遗憾。
  • jQuery easyUI简单的登录窗口设计
    上一节中的各种效果图都是使用的登录窗口，本文介绍简单的登录窗口设计。
  • 利用jQuery制作视频播放器
    本篇文章是利用jQuery制作视频播放器，代码经过测试可以正常使用，
  • 用jQuery框架开发的瀑布流插件
    本文是教大家如何用jQuery框架开发瀑布流插件，这个插件是现今比较流行的图片展示插件。
  • jquery制作简洁版滑动下拉菜单
    本文是依据jquery制作简洁版滑动下拉菜单,经过本人测试可以粘贴直接使用。

    • 网站制作 服务

    免费网站制作报价，免费优化，1对1服务，个性化定制服务

    pc和wap网站制作

    多年建站经验，上千个成功案例，
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版，修复，维护。

    小程序制作

    微信小程序，支付宝小程序，
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容，
    如智能手机，平板电脑和PC

    版权信息：北京创视优品广告传播有限公司    地址：北京市海淀区永澄北路2号院 1号楼B座三层

    网站制作报价   京ICP备20021467号-3