• jquery插件--浮动广告


    * 一个基于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)

  • 相关阅读:
    【论文解读】A Simple Meta-path-free Framework for Heterogeneous Network Embedding
    Cy3.5菁染料标记海藻酸钠;CY3.5-Alginate;Alginate-Y3.5
    Python开发工具
    计算机专业毕业设计项目推荐10-饮食搭配平台(Go+微信小程序+Mysql)
    LeetCode算法题练习——题解
    独立站全网营销
    C2. k-LCM (hard version)-Codeforces Round #708 (Div. 2)
    函数式编程:Lambda 表达式
    结合Navigation组件实现JetPack Compose的界面导航
    Github仓库每日更新京东、淘宝、天猫各品类优惠券
  • 原文地址:https://blog.csdn.net/eeeeety6208/article/details/127748622