Logo

博客

2019-5-17 xoyozo 转载请注明出处

适用于活动现场 LED 大屏幕显示抽奖、抢楼、游戏、视频等互动界面。

以大屏幕宽 7 米,高 3 米为例(具体分辨率未知)。

所以我们的设计稿也按 7:3 设计(以 1400x600 为例)

前端按设计稿的尺寸制作网页内容,

实现将 1400x600 的内容在宽和高方向分别按比例缩放到大屏幕的实际分辨率显示。


HTML:

<div id="main">中华人民共和国</div>

在 <body /> 中放置一个 id 为 main 的 div,所有界面内容在 main 中。


CSS:

body { margin: 0; overflow: hidden; }
#main { position: absolute; width: 1400px; height: 600px; background-image: url(bg.jpg); }

body 边距为 0,无滚动条;

主界面(#main)绝对定位,宽高按设计稿尺寸设置;


JS:

引入 jQuery,

function fn_resize() {
    var windowW = $(window).width();
    var windowH = $(window).height();
    var main = $('#main');
    var mainW = main.width(); // 不会因 scale 而改变
    var mainH = main.height(); // 不会因 scale 而改变

    main.css({
        transform: 'scale(' + (windowW / mainW) + ', ' + (windowH / mainH) + ')',
        left: (windowW - mainW) / 2,
        top: (windowH - mainH) / 2,
    });
}
$(function () {
    fn_resize();
    $(window).resize(fn_resize);
});

在页面初始化和窗口尺寸变化时重新调整界面;

使用 CSS3 的 transform 的 scale 来实现缩放,以大屏幕实际分辨率 1366x768 为例,即宽缩小到原来的 1366/1400,高放大到原来的 768/600 倍。

值得注意的是,scale 后,JS 获取到 #main 的宽度和高度不会改变。 

scale 是固定 #main 的中心位置来缩放的,所以需要使用 left 和 top 来重新定位。


完成后,可以尝试改变浏览器窗口来观察界面变化情况,不管是图片、文字还是背景,都会按窗口大小拉伸,并完全铺满窗口。

现场投影时浏览器按 F11 全屏显示。

2,405 阅读

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%