仿iphone-App Store中图片点击全屏展开效果实战

爱吃糖的小明

已于 2022-03-02 16:33:11 修改

阅读量1.1k

点赞数 1

分类专栏： jQuery js 文章标签： javascript css html html5 jquery

于 2020-04-25 18:10:48 首次发布

本文链接：https://blog.csdn.net/weixin_45785873/article/details/105753416

版权

js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

iphone-App Store中Today的图片点击全屏展开效果【jquery】

示例演示：

jquery点击图片--全屏弹窗效果

偶然间发现iphone手机的App Store中的Today里面的图片点击效果，就用jquery的动画模仿它的效果，自己写了一下，效果出来了，但很多细节还需要优化，这里的事件是点击触发，而真实App Store中的返回效果是手指按住下拉。（其实是按住下拉的效果还不懂怎么做！！）。

在做的过程，也是一个学习的过程，比如在做本案例时：

1、图片铺满视口宽度应该用什么方法。开始的做法是去监听宽度，但是出现层级问题，用position: fixed，又不能实现动画的过渡效果，要解决这个问题，我们可以用HTML5中的2D转换或3D转换transform：translate(0px,0px);这是我在b站看到的一个视频里面用的这个属性，下面的链接，只是他用vue来实现的；

16分钟，学会使用Vue开发一个卡片动效_哔哩哔哩_bilibili

2、jquery中的动画过渡animate（）方法，是不能直接用2D转换或3D转换的，查阅资料后，知道如何在animate（）方法里面传一个参数，让transform：translate(0px,0px)；可以实现动画效果，如下代码所示：

 let heightDiv =  -($(this).offset().top)+"px";
 let transForm = $(this).css("transform","translate(0px,"+heightDiv+")");
 $(this).animate({
         transition: transForm,
 },500,'easeInOutBack'）

3、学会如何去扩展动画缓动效果。因为jquery内置的动画缓动效果是有限的，如果想要更好的动画缓动效果就要扩展动画。随带学习一下extend方法和jquery的原型链。

//动画扩展
   jQuery.easing['jswing'] = jQuery.easing['swing'];
   jQuery.extend(jQuery.easing,{
       easeInOutBack: function (x, t, b, c, d, s) {
           if (s == undefined) s = 1.70158;
           if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
           return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
       },
   })

jquery动画缓动函数速查表：缓动函数速查表

1、搭建HTML界面

<div class="han-all-div">
    <h1 class="han-head">Today</h1>
    <div class="han-all">
        <div class="han-info">
            <div class="han-con">
                <div class="han-tao"></div>
                <div class="han-word">
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="han-all">
        <div class="han-info">
            <div class="han-con">
                <div class="han-tao tao1"></div>
                <div class="han-word">
                    <p>aa现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="han-all">
        <div class="han-info">
            <div class="han-con">
                <div class="han-tao video">
                    <video muted autoplay loop >
                        <source src="UJLpuR9zlx07CJbBOWWs01041200bUMk0E010.mp4">
                    </video>
                </div>
                <div class="han-word">
                    <p>aa现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                    <p>现如今，行业竞争异常激烈，产品要想赢得用户的青睐，在体验设计上往往需要下大功夫，产品体验设计师这一职位应
                        运而生。 本次【蓝湖大咖访谈】有幸采访了 Omega 老师，负责过多个知名项目的他，对产品体验设计颇有见解。 他
                        分享了产品体验设计师的工作内容及养成。希望本次访谈能带给你启发。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

2、css样式修饰

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.han-head{
    width: 80%;
    margin: 0 auto;
    line-height: 100px;
}
.han-all-div{
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.han-all{
    width: 80%;
    height: 40%;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 3%;
    margin-bottom: 100px;
    box-shadow: 0px 10px 44px 9px rgba(87, 87, 87, 0.1);
    cursor: pointer;
    position: relative;
    top: 0px;
    opacity: 1;
    transition: transform 0.5s;
}

.han-info{
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #ffffff;
}
.han-con{
    width: 100%;
    height: 100%;
}
.han-tao{
    width: 100%;
    height:40vh;
    background: url("pc_bg.jpg") center center no-repeat;
    background-size: auto 100%;
}
.video{
    overflow: hidden;
    background: #ffffff;
}
.video video{
    height: 100%;
    overflow: hidden;
}
.tao1{
 
    background: url("huawei-nova-6-5g-kv.jpg") center center no-repeat;
    background-size: auto 100%;
}
.han-word{
    width: 80%;
    line-height: 60px;
    font-size: 20px;
    margin: 30px auto;
}

3、jquery控制效果

$(function () {
        let count = 0;
        $(".han-all").click(function () {
            count++;
            if(count%2 == 1){
                $(".han-all-div").css("overflow","hidden");
                $(this).siblings().animate({opacity:"0"},200);
                let heightDiv =  -($(this).offset().top)+"px";
                let transForm = $(this).css("transform","translate(0px,"+heightDiv+")");
                $(this).animate({
                    width:"100%",
                    borderRadius:"0%",
                    height: "100%",
                    transition: transForm,
                    zIndex:"999"
                },500,'easeInOutBack',function () {
                    $(this).children(".han-info").css({
                        overflow: "scroll",
                    });
                });
            }
            else {
                $(".han-all-div").css("overflow","scroll");
                $(this).siblings().animate({opacity:"1"},200);
                $(this).animate({
                    width:"80%",
                    borderRadius:"3%",
                    height: "40%",
                    transform:"translate(0px,0px)"
                },500,'easeInOutBack',function () {
                    $(this).children(".han-info").css({
                        overflow: "unset",
                    });
                });
            }
        });


   //动画扩展
   jQuery.easing['jswing'] = jQuery.easing['swing'];
   jQuery.extend(jQuery.easing,{
       easeInOutBack: function (x, t, b, c, d, s) {
           if (s == undefined) s = 1.70158;
           if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
           return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
       },
   })
});

优化版

iphone真机上测试有问题，有空再做优化吧，可以的话，小伙伴们，帮忙优化吧，嘿嘿嘿(2021.01.23)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>appStore</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    :root {
      font-size: 15px;
      font-family: Helvetica;

      --body-width: 100%;
      --card-width: 90%;
      --card-height: 280px;
      --img-height: 226px;
      --img-height-expanded: 320px;

      background-color: #fff;
    }
    html{
      width: 100%;
      height: 100%;
    }
    body {
      width: 100%;
      background-color: #eee;
    }
    .view{
      height: 100%;
      overflow: auto;
    }
    .viewHidden{
    /*  height: 100vh;
      overflow: hidden;*/
    }
    .card {
      position: relative;
      width: var(--card-width);
      height: 280px;
      overflow: hidden;
      background-color: #fff;
      border-radius: 1rem;
      box-shadow: 0 .2rem 2rem rgba(0, 0, 0, .1);
      margin: 1rem auto;
      -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .cardDefault{
      position: relative;
      transform: translate(0,0) scale(1) !important;
      height: 280px!important;
    }
    .card img {
      display: block;
      width: 100%;
      height: var(--img-height);
      object-fit: cover;

      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
    }

    .card h4 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: bold;
      padding: .8rem 1.2rem;
      background-color: #fff;
      line-height: 2rem;
      letter-spacing: -.5px;
    }
    .card .content-wrapper {
      height:0;
      transform: scale(0);
    }
    .card .content-wrapper .content {
      padding: 0 1.2rem 1rem;
      background-color: #fff;
    }

    .card p {
      margin: 0 0 18px;
      font-size: 1.2rem;
      line-height: 1.5rem;
    }

    .active {
      z-index: 999;
      transform: scale(calc(1/0.9));
      width: var(--card-width);
      height: 100%;
      overflow: auto;
      transform-origin: 50% 0;
      border-radius: 0;
    }
    .noscroll {
      height: 100vh;
      pointer-events: none;
    }

    .disable{
      opacity: 0;
    }
    .active img {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      height: var(--img-height-expanded);
    }
    .active .content-wrapper{
      height: auto;
      transform: scale(1);
    }
    .active .content-wrapper .content{
      height: 100%;
    }

  </style>

</head>
<body>
<div class="view">
  <div class="card">
    <img src="https://source.unsplash.com/900x600/?nature,water,2">
    <h4>APP OF THE DAY</h4>
    <div class="content-wrapper">
      <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi dolor veritatis neque cumque. Voluptatibus debitis quia unde corrupti laudantium fuga pariatur tenetur dolorum aspernatur laborum iste animi, consequatur porro sequi?</p >
        <p>Suscipit, culpa molestiae alias doloribus praesentium omnis tempore impedit deserunt consequatur tempora. Ad id eum non officia corrupti dolores earum architecto corporis commodi delectus excepturi, laudantium qui, harum aut libero!</p >
        <p>Veritatis nemo deleniti, deserunt iure odit ratione molestiae labore non ipsum obcaecati aperiam officiis repudiandae similique architecto quas nostrum quidem enim fugiat optio alias incidunt ipsam dicta. Minus, perspiciatis reiciendis!</p >
        <p>Consequuntur facilis cupiditate tempore eius esse! Aut quo iste praesentium recusandae commodi placeat est omnis soluta fuga dolore veniam provident culpa, deleniti ullam hic dignissimos fugiat illo nemo veritatis ex.</p >
        <p>Ratione eos illo incidunt illum inventore consequatur eligendi, aliquam ducimus voluptatem? Voluptate dignissimos quasi vel eum tempore, aperiam nemo, aliquam ratione amet aspernatur nam! Fugit quaerat nemo aspernatur. Quia, quis.</p >
      </div>
    </div>
  </div>
  <div class="card">
    <img src="https://source.unsplash.com/900x600/?nature,water,1">
    <h4>APP OF THE DAY</h4>
    <div class="content-wrapper">
      <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi dolor veritatis neque cumque. Voluptatibus debitis quia unde corrupti laudantium fuga pariatur tenetur dolorum aspernatur laborum iste animi, consequatur porro sequi?</p >
        <p>Suscipit, culpa molestiae alias doloribus praesentium omnis tempore impedit deserunt consequatur tempora. Ad id eum non officia corrupti dolores earum architecto corporis commodi delectus excepturi, laudantium qui, harum aut libero!</p >
        <p>Veritatis nemo deleniti, deserunt iure odit ratione molestiae labore non ipsum obcaecati aperiam officiis repudiandae similique architecto quas nostrum quidem enim fugiat optio alias incidunt ipsam dicta. Minus, perspiciatis reiciendis!</p >
        <p>Consequuntur facilis cupiditate tempore eius esse! Aut quo iste praesentium recusandae commodi placeat est omnis soluta fuga dolore veniam provident culpa, deleniti ullam hic dignissimos fugiat illo nemo veritatis ex.</p >
        <p>Ratione eos illo incidunt illum inventore consequatur eligendi, aliquam ducimus voluptatem? Voluptate dignissimos quasi vel eum tempore, aperiam nemo, aliquam ratione amet aspernatur nam! Fugit quaerat nemo aspernatur. Quia, quis.</p >
      </div>
    </div>
  </div>
  <div class="card">
    <img src="https://source.unsplash.com/900x600/?nature,water,4">
    <h4>APP OF THE DAY</h4>
    <div class="content-wrapper">
      <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi dolor veritatis neque cumque. Voluptatibus debitis quia unde corrupti laudantium fuga pariatur tenetur dolorum aspernatur laborum iste animi, consequatur porro sequi?</p >
        <p>Suscipit, culpa molestiae alias doloribus praesentium omnis tempore impedit deserunt consequatur tempora. Ad id eum non officia corrupti dolores earum architecto corporis commodi delectus excepturi, laudantium qui, harum aut libero!</p >
        <p>Veritatis nemo deleniti, deserunt iure odit ratione molestiae labore non ipsum obcaecati aperiam officiis repudiandae similique architecto quas nostrum quidem enim fugiat optio alias incidunt ipsam dicta. Minus, perspiciatis reiciendis!</p >
        <p>Consequuntur facilis cupiditate tempore eius esse! Aut quo iste praesentium recusandae commodi placeat est omnis soluta fuga dolore veniam provident culpa, deleniti ullam hic dignissimos fugiat illo nemo veritatis ex.</p >
        <p>Ratione eos illo incidunt illum inventore consequatur eligendi, aliquam ducimus voluptatem? Voluptate dignissimos quasi vel eum tempore, aperiam nemo, aliquam ratione amet aspernatur nam! Fugit quaerat nemo aspernatur. Quia, quis.</p >
      </div>
    </div>
  </div>
  <div class="card">
    <img src="https://source.unsplash.com/900x600/?nature,water,3">
    <h4>APP OF THE DAY</h4>
    <div class="content-wrapper">
      <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi dolor veritatis neque cumque. Voluptatibus debitis quia unde corrupti laudantium fuga pariatur tenetur dolorum aspernatur laborum iste animi, consequatur porro sequi?</p >
        <p>Suscipit, culpa molestiae alias doloribus praesentium omnis tempore impedit deserunt consequatur tempora. Ad id eum non officia corrupti dolores earum architecto corporis commodi delectus excepturi, laudantium qui, harum aut libero!</p >
        <p>Veritatis nemo deleniti, deserunt iure odit ratione molestiae labore non ipsum obcaecati aperiam officiis repudiandae similique architecto quas nostrum quidem enim fugiat optio alias incidunt ipsam dicta. Minus, perspiciatis reiciendis!</p >
        <p>Consequuntur facilis cupiditate tempore eius esse! Aut quo iste praesentium recusandae commodi placeat est omnis soluta fuga dolore veniam provident culpa, deleniti ullam hic dignissimos fugiat illo nemo veritatis ex.</p >
        <p>Ratione eos illo incidunt illum inventore consequatur eligendi, aliquam ducimus voluptatem? Voluptate dignissimos quasi vel eum tempore, aperiam nemo, aliquam ratione amet aspernatur nam! Fugit quaerat nemo aspernatur. Quia, quis.</p >
      </div>
    </div>
  </div>
</div>
</body>

<script src="./jquery/jquery.js"></script>
<script>
  let currentScroll = 0;
  let bodyScroll = null;
  let startY = 0;
  let scale = 0;
  let card = null;
  let ratio  = 1 / 0.9;
  let cardHeight =101 - 10 * ratio;
  let cardOffsetTop = 0;
  $(window).scroll(function () {
      let bodyScrollTop = $(window).scrollTop();
      bodyScroll = bodyScrollTop;
  });
  $('.card').on('click', function (e) {
    card = $(e.currentTarget);
    cardOffsetTop = -$(card).offset().top;
    $(card).toggleClass('active');
    if ( $(card).hasClass('active')) {
      $('.view').addClass('viewHidden');
      console.log($(this).find('img').outerHeight());
      // $(card).css('height',cardHeight +'%');
      $(card).removeClass('cardDefault');
      $(card).siblings().addClass('disable');
      $(card).css('transform',`translate(0,${cardOffsetTop}px) scale(${`calc(${1/0.9})`})`,);
    }else {
      $(card).addClass('cardDefault');
      $('.view').removeClass('viewHidden');
      $(card).siblings().removeClass('disable');
      // $(card).css('height','280px');
      $(card).css('transform','translate(0,0) scale(1)');
       window.scrollTo(0,bodyScroll);
    }
  });

  $('body').on('touchstart',function (e) {
    startY = e.originalEvent.changedTouches[0].pageY
  });
  $('body').on('touchmove',function (e) {
    let moveY = e.originalEvent.changedTouches[0].clientY;
    let translateY = cardOffsetTop + moveY / 10;
    console.log(translateY);
    let Y = (moveY - startY) / 200;
    scale = 1 - Y;
    if (currentScroll === 0 && scale >0.8 && $(card).hasClass('active') && scale<=1.12 && Y >0){
      $('body').addClass('noscroll'); //缩放时运行产生滚动条
      $(card).removeClass('cardDefault');
      $(card).css({
        transform:`translate(0,${translateY}px) scale(${`calc(${scale})`})`,
      })
    }else if (scale <= 0.8){
      //scale <= 0.8时返回原样，否则弹回
      $(card).removeClass('active');
      $('body').removeClass('noscroll');
      $('.view').removeClass('viewHidden');
      $(card).siblings().removeClass('disable');
      $(card).addClass('cardDefault');
      window.scrollTo(0,bodyScroll);
    }
  });
  $('body').on('touchend',function () {
    $('body').removeClass('noscroll');
    if ($(card).hasClass('active')){
      if (scale <=0.8){
        $(card).addClass('cardDefault');
        $('.view').removeClass('viewHidden');
      }
      else {
        $(card).css('transform',`translate(0,${cardOffsetTop}px) scale(${`calc(${1/0.9})`})`,);
      }
    }
  })

</script>
</html>