Jquery 制作网页飘窗

Jquery 制作网页飘窗

先上效果图，有图有真相才能赢天下

整个运动路径就是这样

代码整理

• HTML

<div id="floadAD" class="floadAd">
    <a class="close" href="javascript:void();" style="color: red">×关闭</a>
    <a class="item" title='郑州中小企业担保有限公司' href="http://www.zzdb.net/comnews/742.html" target="_blank">
    <img src="http://www.zzdb.net/template/default/index/img/piaochuang.jpg" alt="郑州中小企业担保有限公司" /></a>
</div>

• CSS

 <style>
        .floadAd { position: absolute;z-index: 999900; display: none; }
        .floadAd .item { display: block; }
        .floadAd .item img { vertical-align: bottom; }
        /* a img 的组合浏览器默认下边会有几个像素的空白，这里可以消除空白*/
 </style>

• JS实现代码

//调用
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 = -1; 
    //定期执行的时间间隔，单位毫秒 
    var delay = 30; 
    //把元素设置成在页面中间
    obj.css({ left: windowWidth / 2 - obj.width() / 2 + "px", top: windowHeight / 2 - obj.height() / 2 + "px" }); 
    //元素默认是隐藏的，避免上一句代码改变位置视觉突兀，改变位置后再显示出来
    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/position.html)
        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();
    }
}