web网页设计实训——04.23

图片动画放大流程说明：

1.首先搭建HTML，分析页面可知，一个大的div里面嵌套一个<img>标签和图片标题，图片标题用<div>包括。

HTML代码：

<div class="p_list">
    <img src="list_1.jpg">
    <div class="p_Alt">
        <h3>风景一</h3>
    </div>
</div>
<div class="p_list">
    <img src="list_2.jpg">
    <div class="p_Alt">
        <h3>风景二</h3>
    </div>
</div>
<div class="p_list">
    <img src="list_3.jpg">
    <div class="p_Alt">
        <h3>风景三</h3>
    </div>
</div>
<div class="p_list">
    <img src="list_4.jpg">
    <div class="p_Alt">
        <h3>风景四</h3>
    </div>
</div>

2.搭建css样式
分析样式可知，现在主要有3种样式，p_list,<img>,p_Alt这三种样式。

CSS代码：

<style type="text/css">
        .p_list {
            position: relative;
            float: left;
            width: 90px;
            height: 98px;
            padding: 8px;
            border: 1px solid #666;
            margin: 10px;
        }

        img {
            margin-left: -120px;
            margin-top: -120px;
        }

        .p_Alt {
            display: none;
        }

        .p_Img {
            width: 90px;
            height: 90px;
            margin-bottom: 5px;
            overflow: hidden;
        }
</style>

3.编写jQuery代码
首先，需要获取p_list类,且获取p_list是多个对象数组，我们不知道具体操作哪一个p_list需要用到jQuery当中的each函数来遍历
each（）：以每一个匹配的元素作为上下文来执行一个函数。相当于，each可以帮助我们获取第一个p_list，然后操作一系列作用
注意：如果你想得到jQuery对象，可以使用$(this)函数
append（）：向每个匹配的元素内部追加内容
prependTo（）：把所有匹配的元素前置到另一个。指定的元素元素集合中。
eg：
$("<div class='p_Img'>").append(img)，在我们p_Img当中添加img元素。
//相当于

<div class='p_Img'>
    <img src="">
</div>

解释：
$(A).append(B):将元素B添加到A当中
$(A).appendTo(B):将A元素添加到B当中
$("<div class='p_Img'>").append(img).prependTo($this)
首先我们通过$("<div class='p_Img'>")创建了一个div：<div class="p_Img'></div>
用于保存改变后的图片。然后，我们通过 $("<div class='p_Img'>").append(img)
将img元素添加到了p_Img当中，相当于：

<div class='p_Img'>
    <img src="">
</div>

最后通过.prependTo($this)，我们将

<div class='p_Img'>
    <img src="">
</div>

添加到p_list当中，相当于

<div class='p_list'>
	<div class='p_Img'>
	    <img src="">
        </div>
</div>

jQuery整体代码：

<script>
        $(document).ready(function () {
            //each 遍历p_list
            $(".p_list").each(function (index) {//参数index表示：p_list的索引（下标）
                //完成图片初始化的页面效果
                //在遍历p_list的过程中，先获取设置好，外框和图片的长和宽
                var $this = $(this)
                var img = $(this).find('img')//在当前p_list找到img元素
                var Info = $(this).find('p_Alt')//在当前p_list找到p_Alt元素
                var imgWidth = img.width()//获取图片的宽高
                var imgHeight = img.height()
                console.log("imgWidth:" + imgWidth + "imgHeight:" + imgHeight);
                var orgWidth = $this.width()
                var orgHeight = $this.height()
                console.log("orgWidth:" + orgWidth + "orgHeight:" + orgHeight);
                //将图片放入一个新的div里面 class=("p_Img")
                var p_img = $("<div class='p_Img'>").append(img).prependTo($this);
                var p_big = $("<a href='javascript:void(0)' class='p_big'>").appendTo($this);
                var p_cls = $("<a href='javascript:void(0)' class='p_cls'>").appendTo($this);
                var p_imgWidth = p_img.width()
                var p_imgHeight = p_img.height()
                //点击放大动画
                p_big.click(function () {
                    $this.animate({
                        width: imgWidth,
                        height: imgHeight + 85,
                        borderWidth: '5'
                    }, 3000)
                    $(".p_Alt", $this).fadeIn()
                    p_big.fadeOut()
                    p_cls.fadeIn()
                    img.animate({
                        marginTop: "0px",
                        marginLeft: "0px"
                    }, 3000)
                    p_img.animate({
                        width: imgWidth,
                        height: imgHeight
                    }, 3000)
                })
                p_cls.click(function () {
                    $this.animate({
                        width: orgWidth,
                        height: orgHeight,
                        borderWidth: '1'
                    }, 1000)
                    $(".p_Alt", $this).fadeOut()
                    p_big.fadeIn()
                    p_cls.fadeOut()
                    img.animate({
                        marginTop: "-120px",
                        marginLeft: "-120px"
                    }, 1000)
                    p_img.animate({
                        width: p_imgWidth,
                        height: p_imgHeight
                    }, 1000)
                })
            })
        })
    </script>

点击放大的动画有哪些
1.首先p_list长宽放大，以及边框放大
2.图片回到正常尺寸
3.p_Alt图片标题出现
4.关闭按钮出现
5.点击放大按钮消失