html ct报告模板,template.html

模板数据

data = {

// 页面类型

"type": 0, // 0-H5 1-PC

// 初始化参数

"opts": {},

// 页面大小

"width": 640,

"height": 2645,

// 页面背景色

"backgroundColor": "#f3e3f7",

// PC页背景图

"backgroundImage": {

"width": 960,

"height": 960,

"index": "bg",

"data": {

"src": "data:image/jpeg;base64,/9j/4AAQS……H7q6I//9k="

}

},

// 分割出来的图片元素

"list": [

// 独立图片元素

{

"top": 2376,

"bottom": 2543,

"left": 48,

"right": 591,

"width": 544,

"height": 168,

"index": 11,

// 图像数据，根据分辨率会可能会生成 320、640、原始大小 三种

"data": {

"320": "data:image/jpeg;base64,/9j/4AAQS……3M7N9z/9k=",

"src": "data:image/jpeg;base64,/9j/4AAQS……H7q6I//9k="

}

},

// 雪碧图类型

{

"width": 512,

"height": 48,

// 雪碧图中每个子图像元素定位

"list": [

{

"left": 8,

"top": 8,

"originalLeft": 240,

"originalTop": 2584,

"width": 160,

"height": 32

},

{

"left": 176,

"top": 8,

"originalLeft": 160,

"originalTop": 1032,

"width": 328,

"height": 24

}

],

"backgroundColor": "#f3e3f7",

"index": 12,

"data": {

"320": "data:image/jpeg;base64,/9j/4AAQS……AP/Z",

"src": "data:image/jpeg;base64,/9j/4AAQS……D/2Q=="

}

}

]

}

%>

var opts = data.opts || {};

var pageWidth = data.width || 384;

var css = [];

css.push(`html,body,.bgwrap{width:100%;margin:0;background-color:${data.backgroundColor}}`);

css.push(`.bglist{width:${pageWidth}px}`);

css.push('.bgimg{position:absolute;background-repeat:no-repeat}');

if (data.list && data.list.forEach) {

data.list.forEach(function(item) {

css.push(

`.bg-${item.index}{` +

`width:${item.width}px;` +

`height:${item.height}px;` +

`left:${item.left || 0}px;` +

`top:${item.top || 0}px;` +

`background-image:url(${item.data.src});` +

'}'

);

if (item.list && item.list.forEach) {

item.list.forEach(function(sub, subIndex) {

css.push(

`.bg-${item.index}-${subIndex}{` +

`width:${sub.width}px;` +

`height:${sub.height}px;` +

`left:${sub.originalLeft}px;` +

`top:${sub.originalTop}px;` +

`background-position:-${sub.left || 0}px -${sub.top || 0}px;` +

'}'

);

});

}

});

for (var i = 3; i > 0; i--) {

var w = i * 320;

if (data.width > w) {

var _sub = [];

data.list.forEach(function(item) {

if (item.data[w]) {

_sub.push(`.bg-${item.index}{background-image:url(${item.data[w]})}`);

}

});

if (_sub.length) {

css.push(`@media (max-width: ${w}px) {${_sub.join('')}}`);

}

}

}

}

var bgDom;

if (data.type == 1) {

css.push(`.bgwrap{position:relative;width:${pageWidth}px;margin:0 auto}`);

var bgimg = data.backgroundImage || {};

var bgtype = parseInt((data.opts && data.opts.bgtype) || 0);

var background = [];

if (bgimg.data && bgimg.data.src) {

background.push(`background:url(${bgimg.data.src}) no-repeat 50% 0`);

}

if (bgtype & 1) {

bgDom = 1;

}

if (bgtype & 2) {

background.push('background-repeat-y:repeat');

}

if (bgtype & 3) {

background.push('background-size:cover');

}

if (opts.bgcolor) {

background.push(`background-color:${opts.bgcolor}`);

}

if (background.length) {

css.push(`${bgDom ? '.bgcover' : 'body'}{${background.join(';')}}`);

if (bgDom) {

css.push('.bgcover{position:fixed;top:0;bottom:0;left:0;right:0}');

}

}

} else {

css.push('.bglist{transform-origin:0 0}');

}

%>

自动切图DEMO

;(function(){

var width = , s = 1;

var viewport = document.querySelector('meta[name="viewport"]');

function update() {

var ts = window.innerWidth * s / width;

if (s !== ts) {

viewport.setAttribute('content', 'width=device-width,initial-scale=' + (s = ts) + ',maximum-scale=1,user-scalable=0');

}

}

window.addEventListener('resize', update);

update();

})();

;(function(){

var bglist = document.querySelector(".bglist"),

width = ,

curWidth = window.innerWidth,

s = 1;

if (width > 0) {

s = curWidth / width;

if (s != 1) {

bglist.style.zoom = s;

}

} else {

width = curWidth;

bglist.style.width = width + "px";

}

window.addEventListener("resize", function(){

s = window.innerWidth / width;

bglist.style.zoom = s;

});

})();

一键复制

编辑

Web IDE

原始数据

按行查看

历史