代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>size-sensor: DOM element size sensor which will callback when size changed.</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.root {
height: 100%;
}
.root .item {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
height: 25%;
}
.container {
width: 100%;
height: 100%;
background-color: #cae0c1;
flex: 1;
-webkit-flex: 1;
position: relative;
}
/* 颜色生成:https://atool.vip/color */
.item-1 {
background-color: #7fc9ac;
}
.item-2 {
background-color: #85cbae;
}
.item-3 {
background-color: #8bcdaf;
}
.item-4 {
background-color: #91cfb1;
}
.item-5 {
background-color: #9ed2b5;
}
.item-6 {
background-color: #a4d4b6;
}
.item-7 {
background-color: #aad6b8;
}
.item-8 {
background-color: #b0d8ba;
}
.item-9 {
background-color: #b6dabc;
}
.item-10 {
background-color: #bcdcbd;
}
.item-11 {
background-color: #c2debf;
}
.item-12 {
background-color: #c9dfc1;
}
.item-13 {
background-color: #cfe1c3;
}
.item-14 {
background-color: #d5e3c4;
}
.item-15 {
background-color: #dbe5c6;
}
.size-indicator {
position: absolute;
right: 4px;
bottom: 4px;
font-size: 10px;
color: #ccc;
}
.github-url {
color: #a6619c;
position: fixed;
top: 16px;
right: 16px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="root">
<div class="item">
<div class="container item-1">
<div class="size-indicator"></div>
</div>
</div>
<div class="item">
<div class="container item-2">
<div class="size-indicator"></div>
</div>
<div class="container item-3">
<div class="size-indicator"></div>
</div>
</div>
<div class="item">
<div class="container item-4">
<div class="size-indicator"></div>
</div>
<div class="container item-5">
<div class="size-indicator"></div>
</div>
<div class="container item-6">
<div class="size-indicator"></div>
</div>
<div class="container item-7">
<div class="size-indicator"></div>
</div>
</div>
<div class="item">
<div class="container item-8">
<div class="size-indicator"></div>
</div>
<div class="container item-9">
<div class="size-indicator"></div>
</div>
<div class="container item-10">
<div class="size-indicator"></div>
</div>
<div class="container item-11">
<div class="size-indicator"></div>
</div>
<div class="container item-12">
<div class="size-indicator"></div>
</div>
<div class="container item-13">
<div class="size-indicator"></div>
</div>
<div class="container item-14">
<div class="size-indicator"></div>
</div>
<div class="container item-15">
<div class="size-indicator"></div>
</div>
</div>
</div>
<a class="github-url" href="https://github.com/hustcc/size-sensor">size-sensor</a>
<script src="./dist/size-sensor.min.js" type="application/javascript"></script>
<script>
function sensor(element) {
var size = getComputedStyle(element);
var ele = element.querySelector('.size-indicator');
ele.innerHTML = size.width.replace('px', '') + ' x ' + size.height.replace('px', '');
ele.style.color = 'red';
setTimeout(function() {
ele.style.color = 'black';
}, 500);
}
var unbinds = [];
for (var i = 0; i < 15; i ++) {
var ele = document.querySelector('.item-' + (i + 1));
unbinds.push(sizeSensor.bind(ele, sensor));
}
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。