JavaScript 高级课程之缓冲收缩DIV,Math.ceil()向上取整,Math.floor()向下取整

最新推荐文章于 2021-06-07 16:40:37 发布

原创最新推荐文章于 2021-06-07 16:40:37 发布 · 681 阅读

0 ·

CC 4.0 BY-SA版权

WEB前端开发专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的DIV元素缓冲收缩效果。通过鼠标悬停触发DIV大小变化，并利用Math.ceil()和Math.floor()函数进行平滑过渡。详细展示了如何设置HTML样式和编写事件监听函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 高级课程之缓冲收缩DIV,Math.ceil()向上取整,Math.floor()向下取整</title>
<style>
div { width:100px ; height:100px; margin-top:10px; background-color:#AA4244;}
</style>
<script>
var Timer = null;
window.onload = function(){
    var oDiv = document.getElementById('div1');
    oDiv.onmouseover = function(){
        M(1900);
        }
    oDiv.onmouseout = function(){
        M(100);
        }
    }
function M(iT){
    var oDiv = document.getElementById('div1');
    clearInterval(Timer);
    Timer = setInterval(function(){
        var iSeppd = (iT - oDiv.offsetWidth)/8;
        iSeppd = iSeppd>0?Math.ceil(iSeppd):Math.floor(iSeppd);
        if(oDiv.offsetWidth == iT){
                clearInterval(Timer);
            }else{
                oDiv.style.width = oDiv.offsetWidth + iSeppd + 'px';
                oDiv.innerHTML = '<font size="50"><b>'+ oDiv.offsetWidth +'</b></font>';
                }
        },20);
    }
</script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>