HTML5笔记 05：一些API与效果

获取元素的大小（border-box）及其相对于视口的位置信息

<div id="box1"></div>
<script>
    var box1 = document.getElementById('box1');
    // DOMRect 对象 包含元素的大小（border-box）及其相对于视口的位置信息
    // top/y: 8
    // bottom: 8
    // left/x: 8
    // right: 1357
    // width: 1349
    // height: 0
    console.log(box1.getBoundingClientRect());
</script>

获取视口的大小

// html 根标签
var view = document.documentElement;
// 视口的高宽，并不是html根标签的内容区
console.log(view.clientWidth, view.clientHeight);
// html根标签的border-box的大小
console.log(view.offsetWidth, view.offsetHeight);
// 在IE10及以下，offsetWidth 与 clientWidth 都是视口的大小

防止频繁触发事件

$content.on("wheel", function (event) {
    event = event || window.event;
    // 解决滚动过快屏幕切换过快的问题
    clearTimeout(timer);
    timer = setTimeout(function () {}, 200);
});

通过改变高宽来实现动画可以修改动画起始点

<style>
    #box1 {
        position: absolute;
        width: 500px;
        height: 500px;
        background-color: aqua;
        /* 默认情况下，此时动画的起始点是左上角 */
        transition: 2s;
        /* 如果指定以下两个属性，此时动画的起始点是右上角，可以通过定位的方式来改变动画的起始点 */
        top: 20px;
        right: 100px;
    }
    
    #box1:hover {
        width: 100px;
        height: 100px;
    }
</style>
<div id="box1"></div>