JavaScript简单实现页面漂浮窗口（页面弹动）

最新推荐文章于 2024-08-26 14:06:31 发布

貌似丶MaoSi

最新推荐文章于 2024-08-26 14:06:31 发布

阅读量6k

点赞数 4

分类专栏： JavaScript技术

本文链接：https://blog.csdn.net/qq_22849785/article/details/93596680

版权

JavaScript技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上下滑动页面不会消失
窗口大小改变会实时适应窗口的变化。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body {
        height: 1000px;
    }
    .fl {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: fixed;
    }
</style>
<body>
   貌似作品
    <div class="fl" id="fl">
        我要飞呀飞
    </div>
</body>
<script src="./js.js"></script>
</html>

var fl = document.getElementById('fl');

var chroX = document.documentElement.clientWidth;//yemian整个的高宽
var chroY = document.documentElement.clientHeight;

var offsetLeft = fl.offsetLeft;//盒子的位置
var offsetTop = fl.offsetTop;

var timer = 0;

console.log(offsetTop)

var x = 1;
var y = 1;

window.onresize = function(){
    chroX = document.documentElement.clientWidth;//yemian整个的高宽
    chroY = document.documentElement.clientHeight;
}

function move(){
    offsetLeft += x;
    offsetTop += y;
    fl.style.left = offsetLeft  + 'px';
    fl.style.top = offsetTop  + 'px';
    console.log(chroY)
}
window.onload = function(){
   timer = setInterval(function(){
        move();
        if(offsetTop+100 > chroY || offsetTop < 0){
            y = -y;
        }
        if(offsetLeft+100 > chroX || offsetLeft <0){
            x = -x;
        }
    },10)
}
fl.onmouseenter = function(){
    clearInterval(timer)
}
fl.onmouseleave = function(){
    window.onload();
}