原生js缩放自适应【模仿小米页面】

原生js缩放自适应【模仿小米页面】

先看一下小米缩放自适应的页面：http://www.mi.com/redminote8pro

大致思路：

                                

效果示例：http://106.13.123.61/skrollr/test.html

一、搭建基本页面，如下代码所示：

  <!--设置一个对比div，及不添加效果-->
    <div id="vi">
         <video autoplay="autoplay" muted src="img/chuying.mp4" loop="loop"></video>
     </div>
    <!--添加效果的div，多个相同类，即以下所有的类都是相同效果-->
    <div class="vi">
        <video autoplay="autoplay" muted src="img/chuying.mp4" loop="loop"></video>
    </div>
    <div class="vi">
        <video autoplay="autoplay" muted src="img/chuying.mp4" loop="loop"></video>
    </div>
    <div class="vi">
        <video autoplay="autoplay" muted src="img/chuying.mp4" loop="loop"></video>
    </div>
    <div class="vi">
        <video autoplay="autoplay" muted src="img/chuying.mp4" loop="loop"></video>
    </div>

二、为他们添加样式

重点是加上一个动画以便达到延时效果：transition-duration: 2s;如下代码所示：

  body{
            background-color: #000000;
            overflow-x: hidden;
            margin: 0 auto;
        }

        .vi{
            width: 900px;
            transition-duration: 2s;
            margin: 0 auto;
        }
        .vi video{
            display: table;
            width: 100%;
        }
        video{
            width: 100% ;
        }

三、js添加对应效果

如下代码所示：

3.1 定义全局变量，存储视窗宽度、高度和显示比例

3.2 获取所有的类

3.3 定义函数，执行效果

3.4 定义显示比例大小

3.5 判断宽高比例，适配每个屏幕大小

3.6 宽高*比例得到等比例缩放的宽高

<script>
           //定义全局变量，存储视窗宽度、高度和显示比例
           let stageWidth,stageHeight,stageScale;
           //获取所有的类
           let video = document.querySelectorAll(".vi");
            //定义函数，执行效果
           function resize()
           {
               let wid;
               let hei;
               //定义显示比例大小，0.7即是视窗的0.7倍，1时表示全屏显示
               let bWidth = (document.documentElement.clientWidth)*0.7;
               let bHeight = (document.documentElement.clientHeight)*0.7;

                //先判断视窗大小
               if(stageWidth!=bWidth||stageHeight!= bHeight)
                //再循环变量所有的类，以达到相同的类名的div都有这个效果
                       for (i=0;i<video.length;i++){
                   {
                //把显示比例赋值给视窗大小，获取到他们的宽高比例；
                       stageWidth =  bWidth;
                       stageHeight = bHeight;
                //判断宽高比例，适配每个屏幕大小
                       if(stageWidth/stageHeight < 1920/1080)
                       {
                           stageScale = stageHeight/1080;
                           video[i].style.left = (stageWidth - 1920*stageScale)/2 + 'px';
                           video[i].style.top = 0 + 'px';
                       }

                       else
                       {
                           stageScale = stageWidth/1920;
                           video[i].style.left = 0 + 'px';
                           video[i].style.top = (stageHeight - 1080*stageScale)/2 + 'px';
                       }
                       //1920和1080这个是宽高比例，可以按照自己喜欢来设置
                       //宽高*比例得到等比例缩放的宽高
                       wid = 1900*stageScale;
                       hei = 1080*stageScale;
                       video[i].style.width =wid + 'px';
                       video[i].style.height = hei + 'px';

                   }
               }
           }

           window.onresize = function(){
               resize();
           };
           resize();

       </script>

四、完成

以上就是缩放自适应的一个大致思路，效果还有待修整。