JQuery放大动画

最新推荐文章于 2022-11-18 19:26:35 发布

四次元的lucly

最新推荐文章于 2022-11-18 19:26:35 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/weixin_44762420/article/details/89601604

版权

1.首先搭建html
分析页面可知，一个大的div class="p_list"里面嵌套一个<img>标签和图片标题，图片标题用div class="p_Alt"包括。
2.搭建css样式
分析样式可知，现在主要有三种样式，p_list和<img>和p_Alt。
3.编写JQuery代码
首先需要获取P_list类，且获取p_list是多个对象数组，我们不知道具体操作哪一个p_list，需要用到jQuery当中的each函数来遍历。
each（）：以每一个匹配的元素作为上下文来执行一个函数，相当于，rach可以帮助我们获取第一个p-list，然后操作一系列动作。
注意：如果你想得到jquery对象，可以使用$(this)函数。

append():像每个匹配的元素内容追加内容。
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).propendTo($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>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function(){
            //each遍历
            $('.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元素
                imgWidth=img.width()
                imgHeigth=img.Height()
                console.log("imgWidth:"+imgWidth+"  imgHeight:"+imgHeigth)
                orgWidth=$this.width()
                orgHeight=$this.Height()
                console.log("orgWidth:"+orgWidth+"orgHeight:"+orgHeight)
                //将图片放入一个新的div里面class="p_Img"
                var p_img=$ ("<div class='p_Img'>").append(img).propendTo($this)
                var p_big=$("<a href='javascript:void(0)'  class='p_big'>").propendTo($this)
                var p_cla=$("<a href=javascript:void(0)'  class='p_cla'>").propendTo($this)
                //点击放大动画
                p_big.click(function(){
                    /*
                    *
                    *
                    * */
                    $this.animate({
                        width:imgWidth,
                        height:imgHeight+85,
                        borderWidth:'5'
                    },3000)
                    $(".p_Alt".$this).fadeIn()
                    p_big.fadeOut()
                    img.animate({
                        marginTop:"0px",
                        marginLeft:"0px",
                    },3000)
                    p_img.animate({
                        width:imgWidth,
                        height:imgHeight
                    },3000)
                })
            })
        })
    </script>
    <script type="text/css">
        .p_list{
            position: relative;
            float: left;
            width: 90px;
            height: 98px;
            padding: 8px;//图片和边框的距离
            border: 1px   slode   #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;
        }
        .p_big{
            display: block;
            width: 90px;
            height: 23px;
            background: url("images/imgLarge.jpg");
            cursor: pointer;/*鼠标箭头样式*/
        }
        .p_cla{
            poaition:abaolute;
            right: 10px;
            bottom: 10px;
            width: 20px;
            height: 21px;
            background: url("images/imgLarge.jpg");
            display: none;
        }
        </script>
</head>
<body>
  <div class="p_list">
        <div class="p_Alt">
        <img src="images/list_1.jpg">
        <h3>风景一</h3>
        </div>
  </div>
  <div class="p_list">
        <div class="p_Alt">
        <img src="images/list_2.jpg">
        <h3>风景二</h3>
        </div>
  </div>
  <div class="p_list">
        <div class="p_Alt">
        <img src="images/list_3.jpg">
        <h3>风景三</h3>
        </div>
  </div>
  <div class="p_list">
        <div class="p_Alt">
        <img src="images/list_4.jpg">
        <h3>风景四</h3>
        </div>
  </div>
</body>
</html>

四次元的lucly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery放大动画

1.首先搭建html分析页面可知，一个大的div class="p_list"里面嵌套一个<img>标签和图片标题，图片标题用div class="p_Alt"包括。2.搭建css样式分析样式可知，现在主要有三种样式，p_list和<img>和p_Alt。3.编写JQuery代码首先需要获取P_list类，且获取p_list是多个对象数组，我们不知道具体操作哪一个...
复制链接

扫一扫