js 秒味主页菜单 圆球拖拽自由落体

CSS 样式

* {
    padding: 0; 
    margin: 0; 
    // 全局样式重置，去除默认的边距和填充
}
body {
    overflow: hidden; 
    // 隐藏超出部分
}
li {
    list-style: none; 
    // 去除列表前的小圆点
}
ul {
    width: 700px; 
    font-size: 0; 
    position: relative; 
    // 相对定位
}
#div {
    position: absolute; 
    left: 0; 
    width: 500px; 
    height: 500px; 
    border-radius: 50%; 
    background: red; 
    // 定义红色圆形元素
}

HTML 结构

<div id="div">
    <!-- 这是一个红色圆形的div元素 -->
</div>

JavaScript 逻辑

window.onload = function() {
    // 获取div元素
    var div = document.getElementById('div');
    var disX = null, disY = null, preX = null, preY = null, iSpeedX = null, iSpeedY = null, digTimer = null;
    var lodTimer = null;

    div.onmousedown = function(ev) {
        clearInterval(lodTimer);

        var ev = ev || window.event;
        disX = ev.clientX - div.offsetLeft;
        disY = ev.clientY - div.offsetTop;
        preX = ev.clientX;
        preY = ev.clientY;

        // 鼠标移动事件
        document.onmousemove = function(ev) {
            var ev = ev || window.event;
            div.style.left = ev.clientX - disX + 'px';
            div.style.top = ev.clientY - disY + 'px';

            iSpeedX = ev.clientX - preX;
            iSpeedY = ev.clientY - preY;
            preX = ev.clientX;
            preY = ev.clientY;
        };

        // 鼠标放开事件
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
            clearInterval(digTimer);

            digTimer = setInterval(function() {
                iSpeedY += 3;
                var L = div.offsetLeft + iSpeedX;
                var T = div.offsetTop + iSpeedY;

                // 碰撞检测和反弹逻辑
                if (L > document.documentElement.clientWidth - div.offsetWidth) {
                    L = document.documentElement.clientWidth - div.offsetWidth;
                    iSpeedX *= -1;
                    iSpeedX *= .75;
                }

                if (L <= 0) {
                    L = 0;
                    iSpeedX *= -1;
                    iSpeedX *= .75;
                }

                if (T > document.documentElement.clientHeight - div.offsetHeight) {
                    T = document.documentElement.clientHeight - div.offsetHeight;
                    iSpeedY *= -1;
                    iSpeedY *= .75;
                    iSpeedX *= .75;
                }

                if (T <= 0) {
                    T = 0;
                    iSpeedY *= -1;
                    iSpeedY *= .75;
                }

                div.style.left = L + 'px';
                div.style.top = T + 'px';
            }, 30);
        };

        return false;
    };
}