基於JQuery網頁漂浮廣告窗口Js詳解

轉載自：http://blog.csdn.net/u011427035/article/details/51072116

浮窗Css樣式

<style>  
        .floadAd { position: absolute;z-index: 999900; display: none; }  
        .floadAd .item { display: block; }  
        .floadAd .item img { vertical-align: bottom; }/* a img 的組合瀏覽器默認下邊會有幾個像素的空白，這里可以消除空白*/  
</style>  

html內容自己寫

<div id="floadAD" class="floadAd">  
    <a class="close" href="javascript:void();" style="color: red">×關閉</a>  
    <a class="item" title='首屆黨建文化節' href="http://unsun.net" target="_blank">  
        <img src="App_UpLoad/image/20160405/20160405172215_2907.png" alt="首屆黨建文化節" /></a>  
</div>  

 Js代碼

//廣告漂浮窗口  
function FloatAd(selector) {  
    var obj = $(selector);  
    if (obj.find(".item").length == 0) return;//如果沒有內容，不執行  
    var windowHeight = $(window).height();//瀏覽器高度  
    var windowWidth = $(window).width();//瀏覽器寬度  
    var dirX = -1.5;//每次水平漂浮方向及距離(單位：px)，正數向右，負數向左，如果越大的話就會看起來越不流暢，但在某些需求下你可能會需要這種效果  
    var dirY = -1;//每次垂直漂浮方向及距離(單位：px)，正數向下，負數向上，如果越大的話就會看起來越不流暢，但在某些需求下你可能會需要這種效果  
                  
    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() {//定期執行的函數，使元素移動  
        var currentPos = obj.position();//獲取當前位置，這是JQuery的函數，具體見：http://hemin.cn/jq/position.html  
        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();  
    }  
}  

 調用：

FloatAd("#floadAD");//調用