可以让一个元素（DIV） 在窗体的任意位置上下浮动

这个控件时基于JQUERY开发的，所以要导入JQUERY包，把我写的控件代码放到一个js文件里面，然后引用，按照我的范例就可以使用了

  

-----控件代码

/*
让元素上下浮动的控件
options 参数介绍
options.top－》设置这个元素的top值
options.upPix-》设置这个元素向上移动的像素
options.downPix-》设置这个元素向下移动的像素
options.delay -》设置移动的速度
*/
$.fn.upDownControll = function(options) {
    if (!(options && options instanceof Object)) {
        options = new Object();
        options.top = "100px";
        options.upPix = "40px";
        options.downPix = "40px";
        options.delay = 2200;
    }
    var self = $(this);
    var windowWidth = $(window).width(); //浏览器的宽度
    var selfLift = (windowWidth - self.width()) / 2; //计算这个元素的left
    if (options.left) {
        selfLift = options.left;//如果用户给left那么就按用户设置的位置
    }
    self.css("position", "absolute");
    self.css({ left: selfLift, top: options.top });
    var up = function() {
        self.animate({ top: "-=" + options.upPix }, options.delay, "", function() {
            self.animate({ top: "+=" + options.downPix }, options.delay, "", function() { up(); });
        });
    };
    up();
}

 

 

==========HTML代码

<div id="loginDiv" style="width:100px; height:100px;"></div>

 

---------JAVASCRIPT代码

 $(function() {
            options = new Object();
            options.top = "300px";
            options.upPix = "100px";
            options.downPix = "100px";
            options.delay = 500;
            options.left = 100;
            $("#loginDiv").upDownControll(options);
            $(window).resize(function() {
                $("#loginDiv").stop(); -----------------------//防止窗体改变大小，位置不是在原来的位置了
                $("#loginDiv").upDownControll(options);
            });
        });

---------------------第二种方法，什么都不设置

 $("#loginDiv").upDownControll();