JS-弹力球动画的实现

最新推荐文章于 2020-08-06 21:14:07 发布

魑.魅.魍.魉

最新推荐文章于 2020-08-06 21:14:07 发布

阅读量313

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_41998682/article/details/92019768

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is test</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    #main{
        position: absolute;
        margin: 0px;
        padding: 0px;
        height: 50px;
        width: 50px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div id="main">
        <a href="test.html" style="text-decoration: none ;color: #000" target="_blank">
            内容
        </a>
    </div>
</body>
<script>
    s = 0;
    v = 10;
    sx = 0;
    vx = 10;
    div = 50;
    win = document.documentElement.clientHeight;
    winx = document.documentElement.clientWidth;
    function start(){
        obj = setInterval(function () {
            //y轴运动
            s +=v;
            if (s<=0){
                v = -v;
            }
            if (s>=win-div){
                v = -v;
                // s =win-div;
            }
            main.style.top=s+'px';
            //x轴运动
            sx +=vx;
            if (sx<=0){
                vx = -vx;
            }
            if (sx>=winx-div){
                vx = -vx;
                // s =win-div;
            }
            main.style.left=sx+'px';
        },100);
    }
    start();
    main.onmouseenter = function () {
        clearInterval(obj);
    }
    main.onmouseleave = function () {
        start();
    }
</script>
</html>

魑.魅.魍.魉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-弹力球动画的实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>This is test</title><style> *{ margin: 0px; padding: 0px; ...
复制链接

扫一扫

专栏目录