首页 > 其他分享 >大屏自适应

大屏自适应

时间:2024-05-14 15:57:24浏览次数:17  
标签:el style scale const top height 适应 大屏

export const AutoScale = (targetEl, options, root)=> {
    const el = document.querySelector(targetEl);
    if(!el) throw new Error("初始化失败");
    const { width, height } = options;
    el.style.transformOrigin = 'top left';
    el.style.transition = 'all 0.5s';
    const init = () => {
        const scaleX = innerWidth / width;
        const scaleY = innerHeight / height;
        const scale = Math.min(scaleX, scaleY);
        const left = (innerWidth - width * scale) / 2;
        const top = (innerHeight - height * scale) / 2;
        el.style.transform = `translate(${left}px,${top}px) scale(${scale})`;
    };
    init();
    // 防抖
    const debounce = root.$lib.debounce(()=> {
        init();
    }, 1000)
    addEventListener('resize', debounce)
}

标签:el,style,scale,const,top,height,适应,大屏
From: https://www.cnblogs.com/bingquan1/p/18191478

相关文章

  • 震撼视觉:全球冰川数据大屏揭示冰川之美与奥秘
    在浩瀚无垠的宇宙中,地球以其独特的蓝色光环吸引着人们的目光。而在这颗蓝色星球上,冰川这一大自然的杰作,更是以其壮美与神秘,让人们心驰神往。 从阿尔卑斯山脉的冰川到南极洲的冰盖,从格陵兰岛的冰山到喜马拉雅山脉的雪山,这些冰川在数据大屏上以高清画质呈现,仿佛让人置身于冰川世......
  • WPF Canvas在Image 图像上绘图,自适应缩放.
    效果如图  实现了绘图,自适应缩放核心代码如下<Window.InputBindings><KeyBindingKey="Z"Modifiers="Ctrl"Command="{BindingUndoCommand}"/></Window.InputBindings><i:Interaction.Triggers>......
  • 采用flex布局,父组件width为百分比,解决子组件canvas画布width自适应问题
     创建EleResize.js文件(拷贝以下代码即可)varEleResize={ _handleResize:function(e){  varele=e.target||e.srcElement  vartrigger=ele.__resizeTrigger__  if(trigger){   varhandlers=trigger.__z_resizeListeners   if......
  • vue3 页面 自适应 高度 分页固定
    <template><divclass="app_box"><divclass="app_box_title"ref="refTile"><el-form:inline="true":model="formInline"class="demo-form-inline"label-......
  • 高度自适应iframe(Vue3)
    https://juejin.cn/post/7283306395913617427<scriptsetup>import{ref,onBeforeUnmount}from'vue'defineProps({srcdoc:{type:String,default:''}})constiframe=ref()constsetIframeHeight=(......
  • CSS JS 自适应菜单
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>ResponsiveMenu</t......
  • python适应不同场景的函数 - *args, **kwargs
    在Python中,*args和**kwargs是用来处理函数中不定数量的参数的特殊语法。*args和**kwargs介绍*args*args用于传递不定数量的位置参数,它会将传递给函数的位置参数收集到一个元组中。例如:defmy_func(*args):forarginargs:print(arg)my_func(1,2,3)在这个......
  • 大屏设计器,就它了!
    大家好,我是Java陈序员。我们在做季度汇报、年度汇报时,常常需要将数据以图表的形式表示,并在大屏上展示。今天,给大家介绍一个简单、免费、开源的数据大屏设计器。关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。项目介绍DataRoom......
  • vue3 个人自适应配置方案
    ``使用插件"postcss-pxtorem":"^6.1.0",postcss.config.cjs文件配置module.exports={plugins:{autoprefixer:{overrideBrowserslist:["Android4.1","iOS7.1","Chrome>31......
  • 智能决策新时代:可视化大屏是否能够超越传统白板?
    前言2015年,国务院提出了中国制造2025制造强国“三步走”规划,旨在推动中国制造业成为全球制造强国:第一个十年规划,2015-2025:中国制造业迈入制造强国行列,实现技术创新和产业升级。第二个十年规划,2025-2035:中国制造业整体达到世界强国中等水平,推动产业智能化和可持续发展。第三个......