如何實現酷炫的數位大螢幕

依托強大無遠開發平台，可快速實現各種酷炫連動效果的數位化大螢幕。一起來看看吧

DEMO 位址：https://previewer.wuyuan.io/p...

##設定位址：https ://workbench.wuyuan.io/p...

效果圖1

效果圖2

實作步驟

#1. 完成大螢幕基本版面。

使用一個主視窗作為背景，層號設定為 0。其他視窗設定層號為 1，視窗背景選擇無，頭部背景設定為透明。

2. 綁定適當的元件，設定每個從屬視窗的資料來源。

讓其依賴主視窗或其他視窗提供的@變數@，系統會自動形成連動效果。本例所使用的元件是 enhancer-echarts 和 enhancer-numbers 元件。

3. 增加必要的樣式，覆寫或移除不必要的元件樣式。

本例中加入瞭如下CSS內容為每個視窗增加相框， 你可以根據實際情況，設定樣式載入的時機，例如幀初始化時。

#page页面编号 .zwindow {
    box-shadow:none;
    overflow:visible;
}
#page页面编号 .zwindow-header {
    box-shadow: none;
}
#page页面编号 .zwindow-body {
    box-shadow: none;
    border-top: none;
    overflow:visible !important;
}
#page页面编号 .zwindow-header:before {
    content: '';
    position:absolute;
    z-index: 33;
    top: -3px;
    left:-6px;
    height: 12px;
    width: 18px;
    border-left: solid 2px #666;
    border-top: solid 2px #666;
}
#page页面编号 .zwindow-header:after {
    content: '';
    position:absolute;
    z-index: 33;
    top: -3px;
    right:-6px;
    height: 12px;
    width: 18px;
    border-right: solid 2px #666;
    border-top: solid 2px #666;
}
#page页面编号 .zwindow-body:before {
    content: '';
    position:absolute;
    z-index: 33;
    bottom: -3px;
    left:-6px;
    height: 12px;
    width: 18px;
    border-left: solid 2px #666;
    border-bottom: solid 2px #666;
}
#page页面编号 .zwindow-body:after {
    content: '';
    position:absolute;
    z-index: 33;
    bottom: -3px;
    right:-6px;
    height: 12px;
    width: 18px;
    border-right: solid 2px #666;
    border-bottom: solid 2px #666;
}

其他說明

#本例中背景主視窗使用了自訂窗口，包含百度地圖對echarts 的擴展實現。地圖所依賴的echarts.js 需在全域配置-前端-中提前引入：

#就說到這裡了，有需要的可以看：

javascript高級教程

以上是如何實現酷炫的數位大螢幕的詳細內容。更多資訊請關注PHP中文網其他相關文章！