查看效果演示: 点击打开链接
使用方法
压缩包内有一个HTML示例和主要js文件,体积小,带有详细的注释和丰富的示例.
使用插件简单且必要的步骤:
1,引入jquery
2,在demo中提取js代码部分,这是最主要部分
3,css中自定义浮窗样式和内容
示例:
HTML部分:指定一个容器
<div id="move_port">
自定义样式和内容!
</div>
JS部分:
<script>
/*调用移动浮窗方法并按顺序传入正确参数["obj",x,y,l,t,m],obj必填*/
//示例:
move_obj("#move_port");
move_obj(".move_div",'','',10,10,800,500,100);
move_obj(".d1",600,500);
move_obj(".d2",'','','','','',300,200);
move_obj(".d3",500,300);
</script>
调用即可
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 = "<div class=\"close_port\">×</div>";
$(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();
})
}