JS网页上下左右漂浮广告特效

朱记晗.

于 2020-06-15 17:59:45 发布

阅读量618

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/Z15090488131/article/details/106767581

版权

这篇博客介绍了如何利用JavaScript和CSS创建网页上的上下左右漂浮广告特效，包括CSS样式设置、JavaScript代码实现以及如何调整图片大小和漂浮速度。

摘要由CSDN通过智能技术生成

CSS部分：

<style type="text/css">
        body
        {
             margin=0;
             height:500px;
             width:1200px;
             border:1px solid red;
        }
        img
        {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            position: absolute;
        }
        #div
        {
            width: 100px;
            height: 100px;
            background-color: rgba(200,0,200,0.6);
            border-radius: 50px;
            position: absolute;
            background-color: pink;
        }
    </style>

JS部分：

 <script type="text/javascript">
        window.onload = function () {
            var div = document.getElementById("div");
            var UP = false;
            var Left = false;
            setInterval(function () {