您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)web開發(fā)中怎么實(shí)現(xiàn)炫酷的數(shù)字大屏的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
效果圖 1
效果圖 2
使用一個(gè)主窗口作為背景,層號(hào)設(shè)置為 0。其他窗口設(shè)置層號(hào)為 1,并且窗體背景選擇無,頭部背景設(shè)置為透明。
讓其依賴主窗口或其他窗口提供的@變量@,系統(tǒng)會(huì)自動(dòng)形成聯(lián)動(dòng)效果。本例中使用的組件是 enhancer-echarts 和 enhancer-numbers 組件。
本例中添加了如下CSS內(nèi)容為每個(gè)窗口增加相框, 你可以根據(jù)實(shí)際情況,設(shè)置樣式加載的時(shí)機(jī),比如幀初始化時(shí)。
#page頁面編號(hào) .zwindow { box-shadow:none; overflow:visible; } #page頁面編號(hào) .zwindow-header { box-shadow: none; } #page頁面編號(hào) .zwindow-body { box-shadow: none; border-top: none; overflow:visible !important; } #page頁面編號(hào) .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頁面編號(hào) .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頁面編號(hào) .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頁面編號(hào) .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; }
本例中背景主窗口使用了自定義窗口,包含百度地圖對(duì)echarts 的擴(kuò)展實(shí)現(xiàn)。地圖依賴的 echarts.js 需在全局配置-前端-中提前引入:
感謝各位的閱讀!關(guān)于“web開發(fā)中怎么實(shí)現(xiàn)炫酷的數(shù)字大屏”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。