版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原生js缩放自适应【模仿小米页面】
先看一下小米缩放自适应的页面:http://www.mi.com/redminote8pro
大致思路:
一、搭建基本页面,如下代码所示:
<!--设置一个对比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>
以上就是缩放自适应的一个大致思路,效果还有待修整。