热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

探讨JavaScriptScale函数在Angular2中的比例应用与优化策略

Scale proportionally with Angular2我需要在 Angular2 应用程序中实现一个保留缩放比例的部分(例如将 youtube 视


Scale proportionally with Angular2


我需要在 Angular2 应用程序中实现一个保留缩放比例的部分(例如将 youtube 视频嵌入网站时)。我不能使用 iframe,因为它会使传递数据变得非常复杂。

这是一个使用 jQuery 解决方案的示例:

https://css-tricks.com/scaled-proportional-blocks-with-css-and-Javascript/

在 codepen 中,缩小外框将显示所需的功能:

https://codepen.io/chriscoyier/pen/VvRoWy










1
2
3
4
5



// from original article:
var scale = Math.min(

  availableWidth / contentWidth,

  availableHeight / contentHeight
);


在 Angular2 中是否有比在 jQuery 中混合更好的方法呢?我看到了一些库,但遗憾的是没有演示功能。欢迎任何建议。谢谢



相关讨论




  • 也许这是一个有用的想法,但您已经尝试使用视口单位(vh 和 vw)?


  • 我实际上已经对这种技术如何工作进行了很多思考(但从未想出一个好主意)。虽然这看起来很有趣:hackernoon.com/ 但我想知道它是否被认为是最佳实践,我想只要断点在不同的设备上正确显示,那么应该没有问题吗?






我已经将 jQuery 解决方案 (https://css-tricks.com/scaled-proportional-blocks-with-css-and-Javascript) 中的代码"翻译"到了 Angular。

查看这个堆栈闪电战:https://stackblitz.com/edit/angular-vagpoq。我还在代码中包含了带有解释的注释。



相关讨论




  • 哇看起来很棒!我在尝试实施到我的应用程序时遇到的唯一问题是 cannot read property nativeElement of undefined。我想这可能与此有关:stackoverflow.com/a/43384002/1624933,但即使使用长超时和 ngAfterViewInit 生命周期,它仍然无法识别它!我还不得不将 window.Math 更改为只是 Math 因为它说 Math 在类型窗口上不存在


  • 感谢您的积极反馈。你能分享一下你的代码堆栈闪电战吗?让我们一起经历


  • 嗨,感谢您的帮助,不幸的是,我无法使用我的示例进行此操作,由于嵌套组件,它变得非常复杂,但导致了一些关于生命周期和 ViewChild 的有趣阅读,而不是 ViewChildren。我的朋友设法让它使用未针对 Angular 进行修改的原始代码。但是,您的解决方案确实适用于更简单的集成,因此我已将其作为公认的答案。再次感谢


  • @timhc22 感谢您的积极反馈。令人耳目一新。不过我很好奇,你朋友的解决方案是否需要添加 jQuery?


  • 不,他的解决方案并不完整,因为它只在屏幕加载时调整大小(这对我们的需要来说很好)!










推荐阅读
  • 如何清空Layui树结构
    本文将详细介绍如何使用Layui框架清空树形结构,包括创建树、添加节点以及实现清空功能的具体步骤。通过本文,您将能够掌握Layui树的管理技巧。 ... [详细]
  • 深入理解SAP Fiori及其核心概念
    本文详细介绍了SAP Fiori的基本概念、发展历程、核心特性、应用类型、运行环境以及开发工具等,旨在帮助读者全面了解SAP Fiori的技术框架和应用场景。 ... [详细]
  • MVC框架下使用DataGrid实现时间筛选与枚举填充
    本文介绍如何在ASP.NET MVC项目中利用DataGrid组件增强搜索功能,具体包括使用jQuery UI的DatePicker插件添加时间筛选条件,并通过枚举数据填充下拉列表。 ... [详细]
  • 使用 NDB 提升 Node.js 应用调试体验
    本文介绍了由 Google Chrome 实验室推出的新一代 Node.js 调试工具 NDB,旨在为开发者提供更加高效和便捷的调试解决方案。 ... [详细]
  • 探讨了在HTML表单中使用元素代替进行表单提交的方法。 ... [详细]
  • JavaScript 跨域解决方案详解
    本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
  • 本文探讨如何在VueJS项目中通过配置vue.config.js文件实现多页面应用(MPA),特别是针对管理端和客户端的不同需求。 ... [详细]
  • 深入探讨配置文件的管理与优化
    尽管配置文件的重要性不言而喻,但其管理和安全性问题却常被忽视。本文将详细讨论配置文件的不同管理策略及其优缺点。 ... [详细]
  • 支持向量机(SVM)算法综述
    支持向量机(Support Vector Machine, SVM)是由Cortes和Vapnik于1995年首次提出的一种机器学习算法。SVM在处理小样本、非线性及高维模式识别问题上表现出显著的优势,并广泛应用于函数拟合等其他机器学习任务中。 ... [详细]
  • 本文介绍了如何利用jQuery实现对网页上多个div元素的显示与隐藏控制,包括基本的toggle方法及更复杂的显示隐藏逻辑。 ... [详细]
  • 本文汇集了我在网络上搜集以及在实际面试中遇到的前端开发面试题目,并附有详细解答。无论是初学者还是有一定经验的开发者,都应深入理解这些问题背后的原理,通过系统学习和透彻研究,逐步形成自己的知识体系和技术框架。 ... [详细]
  • 本文详细介绍了一种利用 ESP8266 01S 模块构建 Web 服务器的成功实践方案。通过具体的代码示例和详细的步骤说明,帮助读者快速掌握该模块的使用方法。在疫情期间,作者重新审视并研究了这一未被充分利用的模块,最终成功实现了 Web 服务器的功能。本文不仅提供了完整的代码实现,还涵盖了调试过程中遇到的常见问题及其解决方法,为初学者提供了宝贵的参考。 ... [详细]
  • 整合百度UEditor编辑器于ASP后端的实现步骤与技巧
    随着微软停止对XP系统的支持,公司已全面升级至Windows 7。早期网站创建时使用的编辑器仅兼容IE6浏览器,而如今系统更新后,原有的编辑器已无法满足新环境的需求。本文详细介绍了如何将百度UEditor编辑器整合到ASP后端,包括实现步骤和实用技巧,确保网站在新系统下仍能高效运行并提供良好的用户体验。 ... [详细]
  • JavaScript对象类型 ... [详细]
author-avatar
当时桃花恨春风_375
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有