Javacript实现一个广告飘窗或小球反弹特效

Posted m0_58510118

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javacript实现一个广告飘窗或小球反弹特效相关的知识,希望对你有一定的参考价值。

一、广告飘窗

1、先在body里添加一个div

<body>
    <div id="div1"></div>
</body>

2、开始编写js部分代码

      1.设置div的样式。我这就用js设置。

//获取节点
var div = document.getElementById("div1");

//设置div初始位置
var offsetx = 0;
var offsety = 0;

//定义top,left每次变更的距离
var stept = 1;
var stepl = 1;

//div样式
div.style.width = "200px"
div.style.height = "200px"
div.style.background = "red";
div.style.position = "absolute";
div.style.top = offsety;
div.style.left = offsetx;

        2. 获取网页可视区域的宽高,可以得出div的top,left可移动范围等于可视区域减去div自身的高度

 // 网页可视区域的宽高
var seeHeight = document.documentElement.clientHeight
var seeWidth = document.documentElement.clientWidth;

var maxLeft = seeWidth - 200;
var maxTop = seeHeight - 200;

        3.定义控制div移动的函数,为了防止div跑出可视范围之外,一开始判断offsety、offsetx(也就是div的top、left)是否大于最大的可移动范围(会超过可视范围下边或者右边),或者小于0(会超过可视范围上边或者左边)。

如果超过,就把step每次变更的距离设为负数,变为负数之后,offsety、offsetx每次加的是一个负数,这样offsety、offsetx就等于每次递减

如果没超过,则使div的top或者left继续增加

 function move() 
            if (offsety >= maxTop || offsety < 0) 
                stept = -stept
            
            if (offsetx >= maxLeft || offsetx < 0) 
                stepl = -stepl
            
            offsety += stept
            offsetx += stepl;
            div.style.top = offsety + "px";
            div.style.left = offsetx + "px";
        

        4.定时器,使函数20毫秒执行一次

 var t = setInterval(move, 20)

        5.添加div的移入停止,移出继续事件

div.onmouseover = function() 
       clearInterval(t)

div.onmouseout = function() 
    t = setInterval(move, 20)

二、为了代码后面使用方便,把广告飘窗做了一个封装

每次使用调用就行

divId:div的id名;

offsety:div初始距离上边的距离;

offsetx:div初始距离左边的距离;

stept:div每次垂直移动的距离;

stepl:div每次水平移动的距离;

speed:div移动速度(定时器触发间隔);

 #div1 
            width: 100px;
            height: 100px;
            background-color: red;

            //圆形
            border-radius: 50%;
        

 move("div1", 100, 100, 20, 20, 50)

function move(divId, offsety, offsetx, stept, stepl, speed) 

            var div = document.getElementById(divId);
            var offsetx = offsetx;
            var offsety = offsety;
            var stept = stept;
            var stepl = stepl;
            var width = div.offsetWidth
            var height = div.offsetHeight

            div.style.position = "absolute";
            div.style.top = offsety;
            div.style.left = offsetx;
            var maxLeft = seeWidth - width;
            var maxTop = seeHeight - height;

            var t = setInterval(
                function move1() 
                    if (offsety >= maxTop || offsety < 0) 
                        stept = -stept
                    
                    if (offsetx >= maxLeft || offsetx < 0) 
                        stepl = -stepl
                    
                    offsety += stept

                    offsetx += stepl;
                    div.style.top = offsety + "px";
                    div.style.left = offsetx + "px";
                , speed);
        

以上是关于Javacript实现一个广告飘窗或小球反弹特效的主要内容,如果未能解决你的问题,请参考以下文章

小球落地反弹问题(java实现)

Unity中实现小球反弹

2019年春第四次程序设计实验报告

学生python编辑2--反弹的小球

1009反弹的小球

蓝桥杯选拔赛真题23python小球反弹 青少年组蓝桥杯python 选拔赛STEMA比赛真题解析