如图想点击echarts把这个卡片放大到满屏,记得有相关的js插件,但是实在没找打,求问各位大神
如果实在是找不到的话,可以尝试自己写一个。
一、使用cloneNode复制一个节点
// 假设是一个id为node的节点
let tp = document.getElementById('node');
// 点击一次 复制一份 一样的node并占满全屏
// 再点击一次 让node2消失
node.onclick = (e) => {
let node2 = node.cloneNode(true);
document.body.appendChild(node2);
node2.style.position = 'fixed';
node2.style.zIndex = '9999';
node2.style.width = '100vw';
node2.style.height = '100vh';
node2.style.left = '0';
node2.style.top = '0';
node2.onclick = ()=>{
document.body.removeChild(node2);
};
};
这个方案可能就只能做展示使用了,如果node这个节点还有双向绑定的事件或者其他方法,可能就会无法奏效。
二、直接放大
像方法一里一样不过是直接放大node节点
let node = document.getElementById('node');
let flag = false;
let position = node.style.position
let zIndex = node.style.zIndex
let width = node.style.width
let height = node.style.height
let left = node.style.left
let mytop = node.style.top
node.onclick = (e) => {
if (flag) {
node.style.position = position;
node.style.zIndex = zIndex
node.style.width = width
node.style.height = height
node.style.left = left
node.style.top = mytop
} else {
node.style.position = 'fixed';
node.style.zIndex = '9999'
node.style.width = '100vw'
node.style.height = '100vh'
node.style.left = '0'
node.style.top = '0'
}
flag = !flag
}
不过这样可能就会打乱原来的布局就是了,希望能帮到你。
fullscreen,你说的是这个东西?如果不是全屏的话,放大的意义不是很大呀,你可以试试transform然后纠正一下位置。clone节点的方案不太好,因为动态数据不好整
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
Fullscreen_API
全屏 API
为使用用户的整个屏幕展现网络内容提供了一种简单的方式,并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。可以在全屏 API 指南这篇文章了解更多细节。