js, jquery元素漂浮移动, 类似桌球来回碰撞

查看效果演示: 点击打开链接

 

使用方法

压缩包内有一个HTML示例和主要js文件,体积小,带有详细的注释和丰富的示例.
使用插件简单且必要的步骤:
   1,引入jquery
   2,在demo中提取js代码部分,这是最主要部分
   3,css中自定义浮窗样式和内容
示例:
HTML部分:指定一个容器

   自定义样式和内容!

JS部分:

调用即可

function move_obj(obj, move_w, move_h, x, y, l, t, m) {
    if (obj == undefined) {
        alert("方法调用错误,请传入正确参数!");
        return;
    }
    move_w = (move_w == undefined || move_w == '') ? $(window).width() : move_w;
    move_h = (move_h == undefined || move_h == '') ? $(window).height() : move_h;
    x = (x == undefined || x == '') ? 3 : x;
    y = (y == undefined || y == '') ? 3 : y;
    l = (l == undefined || l == '') ? 0 : l;
    t = (t == undefined || t == '') ? 0 : t;
    m = (m == undefined || m == '') ? 80 : m;
    function moving() {
        x = (l >= move_w - $(obj).width() || l < 0) ? -x : x;
        y = (t >= move_h - $(obj).height() || t < 0) ? -y : y;
        l += x;
        t += y;
        $(obj).css({
            left: l,
            top: t
        });
    }
    var timer_move = setInterval(function() {
        moving();
    }, m);
    $(obj).mouseover(function() {
        $(this).children(".close_port").show();
        clearInterval(timer_move);
    });
    $(obj).mouseout(function() {
        $(this).children(".close_port").hide();
        timer_move = setInterval(function() {
            moving();
        }, m);
    });
    var close = "
×
";
    $(obj).append(close);
    $(".close_port").css({
        position: 'absolute',
        display: 'none',
        width: '20px',
        height: '20px',
        top: 0,
        right: 0,
        color: 'red',
        border: '1px solid red',
        background: '#ccc',
        textAlign: 'center',
        lineHeight: '20px',
        cursor: 'pointer'
    });
    $(obj).on('click', '.close_port', function() {
        $(obj).find('.close_port').trigger('mouseover');
        clearInterval(timer_move);
        $(this).parent().remove();
    })
}