飘浮元素代码

可以自定义起始位置，速度

by ijse

HTML

<div id="ctner">
    <div id="fdiv"></div>
</div>

CSS

#ctner { width:400px; height:400px; background-color:blue; }
#fdiv { width:60px; height:40px; background-color:pink; cursor:pointer; }

JavaScript

var ff=function(objId,speed,direction) {
    // init params
    var obj = $("#" + objId);
    if(!obj.size()) return false;
    var x,y;
    speed = Number(speed)?speed:10;
    var direction = direction?direction:[-1,1];
    
    var min_x = obj.parent().offset().left;
    var min_y = obj.parent().offset().top;
    var max_x = min_x + obj.parent().width() - obj.width();
    var max_y = min_y + obj.parent().height() - obj.height();
    
    //debug
    $("body").append($("<p>").append("min_x:"+min_x));
    $("body").append($("<p>").append("max_x:"+max_x));
    $("body").append($("<p>").append("min_y:"+min_y));
    $("body").append($("<p>").append("max_y:"+max_y));
    
    // init position
    obj.offset({top:y,left:x});
    
    // init method
    this.intervalHandle="";
    function move() {
        x += direction[0];
        y += direction[1];
        if(x < min_x) {
             x = min_x;
             direction[0] = -direction[0];  
        }
        if(y < min_y) {
             y = min_y;
             direction[1] = -direction[1];
        }
        if(x > max_x) {
             x = max_x;
             direction[0] = -direction[0];
        }
        if(y > max_y) {
             y = max_y;
             direction[1] = -direction[1];  
        }
        obj.offset({top:y,left:x});
    }
    
    // stop while mouse move on 
    obj.hover(function() {
        clearInterval(intervalHandle);
    },function() {
        intervalHandle = setInterval(move,speed);
    });
    return {
        start: function(_x,_y) {
            x = Number(_x)?_x:0;
            y = Number(_y)?_y:0;
            intervalHandle = setInterval(move,speed);
        }
    }
}

$(function() {
    var m = new ff("fdiv",30,[-1,-3]);
    m.start(10,10);
});