客户端

记一次数据大屏开发的实现要点

所在版块: 前端技术 2017-01-06 14:07 [复制链接] 查看: 3666|回复: 0
大屏展现的核心:全屏固定展现;根据不同的屏幕分辨率缩放;数据定时自动更新。

1. 全屏固定展现
  1. html {height:90%;overflow-x:hidden; overflow-y:visible;}
  2. body {
  3.     width: 2020px;
  4.     height: 1080px;
  5.     margin:0; padding:0;
  6.     transform-origin: left top 0px;
  7.     background-color: #0f2a42;
  8.     background: url("bg.png") 0% 0% / 100%;
  9.     position: relative;
  10.     overflow: hidden;
  11. }
复制代码


2. 根据不同的屏幕分辨率缩放
  1. // 根据屏幕自动伸缩
  2.     function scalebody() {
  3.     var ratioX = jQuery(window).width() / jQuery('body').width();
  4.     jQuery(document.body).css({
  5.         transform: "scale(" + ratioX +")",
  6.         backgroundSize: "100%"
  7.     });
  8.     }
复制代码


3. 数据定时自动更新
  1. /**
  2. * 每隔一段时间(毫秒)调用一次函数
  3. **/
  4. function croncall(func,ms)
  5. {
  6.     func();
  7.     var logstr = "("+date("Y-m-d H:i:s")+") croncall: "+func.name;
  8.     log.info(logstr);
  9.     setTimeout(function () {
  10.         croncall(func,ms);
  11.     }, ms);
  12. }
复制代码








分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码关注微信公众号

QQ|Archiver|手机版|小黑屋|mwt-design ( 沪ICP备12041170号-1

GMT+8, 2024-11-22 06:10 , Processed in 0.068144 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回列表