js广告浮动效果

~未来

于 2020-07-07 15:16:58 发布

阅读量145

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/ghr1249184750/article/details/107182124

版权

1、设置body属性（宽、高....）

 height:？px;
 width:？px;

2、设置图片起始位置及图片大小

<div id="div" style="top:0px; left:0px">
    <img src="1111.jpg" style="width:100px; height:100px;"/>
</div>

设置属性进行绝对定位

position:absolute;

3、实现功能

window.onload = function () {
            var div = document.getElementById("div");
            var UP = false;
            var Left = false;
            setInterval(function () {
                var top = parseInt(div.style.top);
                var left = parseInt(div.style.left);
                if (top === 0) {
                    UP = false;
                    div.style.top = top + 1 + "px";
                } else if (top === 400) {
                    UP = true;
                    div.style.top = top - 1 + "px";
                } else {
                    if (UP === false) {
                        div.style.top = top + 1 + "px";
                    } else {
                        div.style.top = top - 1 + "px";
                    }
                }
                if (left === 0) {
                    Left = false;
                    div.style.left = left + 1 + "px";
                } else if (left === 1100) {
                    Left = true;
                    div.style.left = left - 1 + "px";
                } else {
                    if (Left === false) {
                        div.style.left = left + 1 + "px";
                    } else {
                        div.style.left = left - 1 + "px";
                     }
                }
            }, 10);
        }