原生JS实现漂浮广告的一种方法(Demo)_js在页面上飘一个样式-优快云博客

本文链接：https://blog.youkuaiyun.com/ta_men/article/details/62418844

实现效果 : 打开网页后,广告窗从指定位置开始在页面漂浮,当鼠标移入时窗口暂停运动,鼠标移出后,窗口在暂停处按原运动轨迹运动,窗口可关闭.

思路 : 实现运动效果需要依托定位属性,使用定时器重复执行代码改变定位,获得漂浮效果;设定不同的x(宽度)和y(高度)方向上每次改变的像素值,实现不同的漂浮轨迹;判断运动窗口达到可视区域边界时,改变x或y的正负值,实现反弹.

———————————更新———————————-

冷风吹醒(手动实验) :

element.style.left(/height/top/width)的使用 :

    在元素的css样式被初始赋值,未经后续赋值,此时element.style.left值为空(无论left初始值为多少),经过后续赋值后才会有值.

完整代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{                          //全局reset
                padding: 0;
                margin: 0;
            }
            #advts{
                position: absolute;
                /*left: 0;              这儿有个problem
                top: 0;*/