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)

jquery插件--浮动广告相关推荐

html5自动提示插件,jquery万能浮动框提示插件
特效描述:jquery 万能浮动框提示.jquery万能浮动框提示插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 jQuery万能浮动框插件测试一.加载页面上元素默认rel加 ...
jQuery实现的浮动广告
实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
1000个JQuery插件（转载）
超强1000个jquery极品插件!(转) 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++ ...
Js浮动广告效果实现
第一种漂浮广告不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...
1000个jquery插件
1.导航类 (1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件.二手图书二手书特价书旧书网 (2)jQuery-Horizontal ...
你还不会创建jQuery插件？
如何创建一个jQuery插件为什么要创建jQuery插件 ? 因为这样代码可以复用. 我们有这样一个页面,页面上面有如下的文字(看源码),我们想要的效果是,当鼠标移到链接的时候,用一个浮动的div来 ...
【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论前段时间领导 ...
2011年9月最新整理的10个有趣的jQuery插件集合
这篇文章将整理出最有趣的jQuery10个插件集合,包括不同的插件,如滑块,用户界面对话框,图像过滤器等,对于喜欢把网页做得很炫很有创意的朋友,这些插件将是非常有帮助的. 1. Rotating ...
50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

jquery插件--浮动广告

jquery插件--浮动广告相关推荐

最新文章

热门文章