jquery插件--浮动广告

/*
* name: jquery.floatAD.js
*
* Copyright (c) 2011
* $author: PoulXia$
* $Date: 2011-12-31$
* $Contact: xbh520@gmail.com$
*/

/**
* 一个基于jQuery的浮动广告的插件
调用示例1:
$(document).ready(function () {
    new $.floatAD({ renderTo: "floatDiv"});
});
调用示例2:
$(document).ready(function () {
    //初始化配置
    this.config = {
        renderTo: "floatDiv",
        //默认起始位置
        position:{
            x: 20,
            y: document.documentElement.clientHeight
        },
        //默认水平移动方向
        horizontalDirection:this.direction.right,
        //默认垂直移动方向
        verticalDirection:this.direction.up,
        //每次移动的位置
        moveSpace:1,
        //移动间隔,多少毫秒移动一次
        delay:30
    };
    new $.floatAD({ renderTo: "floatDiv"});
});
*/
(function ($) {
    /** config配置列表
    * renderTo:要呈现到的元素ID
    */
    $.floatAD = function (initConfig) {

        //浮动方向
        this.direction =
        {
            up: "up",
            down: "down",
            left: "left",
            right: "right"
        };

        //初始化配置
        this.config = {
            //默认起始位置
            position: {
                x: 20,
                y: document.documentElement.clientHeight
            },
            //默认水平移动方向
            horizontalDirection: this.direction.right,
            //默认垂直移动方向
            verticalDirection: this.direction.up,
            //每次移动的位置
            moveSpace: 1,
            //移动间隔,多少毫秒移动一次
            delay: 30
        };

        $.extend(this.config, initConfig);
        $.extend(this, this.config);

        //定时器
        this.interval;

        this.container = $("#" + this.config.renderTo);
        this.container.css("position", "absolute")
        .css("top", this.position.y)
        .css("left", this.position.x);

        this.screenWidth = $(window).width();
        this.screenHeight = $(window).height();
        this.containerWidth = this.container.outerWidth();
        this.containerHeight = this.container.outerHeight();

        this.changePos = function () {
            this.container.css("left", this.position.x + $(document).scrollLeft());
            this.container.css("top", this.position.y + $(document).scrollTop());

            //垂直方向移动
            if (this.verticalDirection == this.direction.down) {
                this.position.y = this.position.y + this.moveSpace;
            } else {
                this.position.y = this.position.y - this.moveSpace;
            }

            //如果到达垂直边界，改变移动方向
            if (this.position.y <= 0) {
                this.verticalDirection = this.direction.down;
                this.position.y = 0;
            }
            else if (this.position.y >= (this.screenHeight - this.containerHeight)) {
                this.verticalDirection = this.direction.up;
                this.position.y = this.screenHeight - this.containerHeight;
            }

            //水平方向移动
            if (this.horizontalDirection == this.direction.right) {
                this.position.x = this.position.x + this.moveSpace;
            } else {
                this.position.x = this.position.x - this.moveSpace;
            }

            //如果到达水平边界，改变移动方向
            if (this.position.x <= 0) {
                this.position.x = 0;
                this.horizontalDirection = this.direction.right;
            }
            else if (this.position.x >= (this.screenWidth - this.containerWidth)) {
                this.position.x = this.screenWidth - this.containerWidth;
                this.horizontalDirection = this.direction.left;
            }
        }

        this.start = function () {
            this.container.show();
            var me = this;
            this.interval = setInterval(function () {
                me.changePos();
            }, this.delay);
        }
        debugger
        this.start();
    }
})(jQuery)

 

浮动广告