标签：动画 console 05 视口 API HTML5 box1 event view

获取元素的大小（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>

标签：动画,console,05,视口,API,HTML5,box1,event,view
来源： https://blog.csdn.net/Alice_Lee_Lee/article/details/120100412

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。