js--简单漂浮广告

最新推荐文章于 2024-03-15 11:32:13 发布

@曉

最新推荐文章于 2024-03-15 11:32:13 发布

阅读量478

点赞数

CC 4.0 BY-SA版权

文章标签： js漂浮广告

本文链接：https://blog.youkuaiyun.com/weixin_44456027/article/details/86240906

本文介绍了如何使用JavaScript创建一个简单的网页漂浮广告，让广告在用户的可视区域内动态移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的漂浮广告，在网页可视区域飘动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #box{
            width: 400px;
            height: 600px;
            /*border: 1px solid black;*/
            position: relative;
            float: left;
            left: 0;
            top: 0;
            background: url("../2019.1.8/3.jpg")no-repeat;
            background-size: 100% 100%;
        }
        #guan{
            width: 15px;
            height: 15px;
            border: 1px solid black;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top: 0;
            text-align: center;
            line-height: 15px;
        }
        #fang{
            width: 100px;
            height: 100px;
            opacity: 0.3;
            border-radius: 5px;
            background:white;
            position: absolute;
        }
        #big{
            width: 100px;
            height: 100px;
            /*border: 1px solid black;*/
            float: left;
            margin-left: 50px;
            margin-top: 50px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
        }
        #dbimg{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box" style="width: 300px; height: 500px;">
    <div id="fang"></div>
    <div id="guan">x</div>
</div>

<div id="big"><img id="dbimg" src="../2019.1.8/3.jpg" alt="" width="300px" height="500px"></div>
</body>
<script>
    var box = document.getElementById('box');
    var fang = document.getElementById('fang');
    var guan = document.getElementById('gaun');
    var dbimg = document.getElementById('dbimg');
    var maxleft = box.offsetWidth-fang.offsetWidth;
    var maxtop = box.offsetHeight-fang.offsetHeight;

    var le = 10;
    var to = 10;
    function piao(){
        var oldleft = fang.offsetLeft;
        var newleft =oldleft+le;

        var oldtop = fang.offsetTop;
        var newtop =oldtop+to;
        if(newleft >maxleft){
            newleft=maxleft;
        }
        if(newtop>maxtop){
            newtop=maxtop;
        }
        if(newleft<0){
            newleft=0;
        }
        if(newtop<0){
            newtop=0;
        }
        fang.style.left=newleft+'px';
        fang.style.top=newtop+'px';

        if(newtop==maxtop || newtop==0){
            to=-1*to;
        }
        if(newleft==maxleft || newleft==0){
            le=-1*le;
        }

        var xbili = dbimg.offsetWidth/box.offsetWidth;
        var ybili = dbimg.offsetHeight/box.offsetHeight;
        var bigx = newleft*xbili;
        var bigy = newtop*ybili;
        dbimg.style.left=-bigx+'px';
        dbimg.style.top= -bigy+'px';

    }
    var time = setInterval(piao,50)
    box.onmouseover=function () {
        clearInterval(time)
    }

    box.onmouseout=function () {
        time = setInterval(piao,50)
    }
    guan.onclick=function () {
        box.style.display='none';
    }
</script>
</html>