js封装了一个浮动广告

老板说要做一个电话号码在页面中能看到,并且弹来弹去。

为了便于随便调用,考虑到封装性,所以就写了一个纯js的,朋友们有需要可以拿去,随掉随用,不过注意要放在dom底部。

(function(){
    var div = document.createElement('div');
    div.innerText = '电话:183-1083-8918';
    div.style.background = '#85ffe9';
    div.style.position = 'fixed';
    div.style.zIndex = 1000;
    div.style.left = '0px';
    div.style.top = '0px';
    div.style.border = '1px solid #ccc';
    div.style.fontSize = '20px';
    div.style.fontFamily = 'Microsoft YaHei';
    div.style.borderRadius = '6px';
    div.style.color = '#cb1d25';
    document.body.appendChild(div);


    var max_X = document.body.clientWidth - div.offsetWidth,// 最大范围
        max_Y = document.body.clientHeight - div.offsetHeight,

        direction_X = 1, // 方向
        direction_Y = 1,

        speed_X = 1,// 速度
        speed_Y = 1;

    var timer = null;

    function moveXY(){
        var left_X = parseInt(div.style.left);
        var top_Y = parseInt(div.style.top);

        direction_X = (left_X>max_X||left_X<0) ? -direction_X : direction_X;// 越界规范
        direction_Y = (top_Y>max_Y||top_Y<0) ? -direction_Y : direction_Y;

        div.style.left = (left_X+direction_X*speed_X)+'px';
        div.style.top = (top_Y+direction_Y*speed_Y)+'px';

        timer = setTimeout(arguments.callee,16.7);//类似递归调用
    }

    moveXY();
    div.onmouseenter = function(event){
        event = event||window.event;
        clearTimeout(timer);


    };
    div.onmouseout = function(){
        moveXY();
    }
})();

猜你喜欢

转载自blog.csdn.net/feilzhang/article/details/83183760