//调用
FloatAd("#floadAD");
//广告漂浮窗口
function FloatAd(selector) {
var obj = $(selector);
//如果没有内容,不执行
if (obj.find (".item").length == 0) return;
//浏览器高度
var windowHeight = $(window).height();
//浏览器宽度
var windowwidth = $ (window).width();
//每次水平漂浮方向及距离(单位:px),正数向右,负数向左,如果越大的话就会看起来越不流畅,但在某些需求下你可能会需要这种效身
var dirX = -1.5;
//每次垂直漂浮方向及距离(单位:px),正数向下,负数向上,如果越大的话就会看起来越不流畅,但在某些需求下你可能会需要这种效身
var dirY = -l;
/定期执行的时间间隔,单位毫秒
var delay = 30;
//把元素设置成在页面中间
obj.css({ left: windowwidth / 2 - obj.width() / 2 + "px", top: windowHeight / 2 - obj. height() / 2 + "
//元素默认是隐藏的,避免上一句代码改变位置视觉突兀,改变位置后再显示出来
obj.show();
//定期执行,返回一个值,这个值可以用来取消定期执行
var handler = setInterval(move, delay);
//鼠标经过时暂停,离开时继续
obj.hover(function(){
//取消定期执行
clearInterval(handler);
},function() {
handler = setInterval(move, delay);});
//绑定关闭按钮事件
obj.find(".close").click(function() {
close();
});
//当改变窗口大小时,重新获取浏览器大小,以保证不会过界(飘出浏览器可视范围)或漂的范围小于新的大小
$(window).resize(function() {
//浏览器高度
windowHeight = $(window).height();
//浏览器宽度
windowwidth = $(window).width();
});
//定期执行的函数,使元素移动
function move() {
//获取当前位置,这是JQuery的函数,具体见:[http://hemin.cn/jq/position.html] (http://hemin.cn/jq/positior
var currentPos = obj.position();
//下一个水平位置
var nextPosX = currentPos.left + dirX;
//下一个垂直位置
var nextPosY = currentPos.top + dirY;
//这一段是本站特有的需求,当漂浮到右边时关闭漂浮窗口,如不需要可删除
if (nextPosX >= windowwidth - obj.width()) {
close();
}
//如果达到左边,或者达到右边,则改变为相反方向
if (nextPosX <= 0 || nextPosX >= windowwidth - obj.width ()){
//改变方向
dirX=dirX *-1;
//为了不过界,重新获取下一个位置
nextPosX = currentPos.left + dirX;
}
//如果达到上边,或者达到下边,则改变为相反方向。
if (nextPosY <= 0 || nextPosY >= windowHeight - obj.height() - 5) {
//改变方向
dirY= dirY *-1;
//为了不过界,重新获取下一个位置
nextPosY = currentPos.top + dirY;
}
//移动到下一个位置
obj.css({ left: nextPosX + "px", top: nextPosY + "px"});
}
//停止漂浮,并销毁漂浮窗口
function close() {
clearInterval(handler);
obj.remove();
}
}