1 Star 1 Fork 0

小为 / size-sensor

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 4.14 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
hustcc 提交于 2018-07-05 13:23 . add ResizeObserver support
<!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>
JavaScript
1
https://gitee.com/hustcc/size-sensor.git
git@gitee.com:hustcc/size-sensor.git
hustcc
size-sensor
size-sensor
master

搜索帮助

14c37bed 8189591 565d56ea 8189591