【javascript】學習總結——漂浮廣告特效

漂浮廣告特效代碼：

<script type="text/javascript" language="javascript">
    //定義全局變量
    var xPos=0;//x軸座標
    var yPos=0;//Y軸座標
    var step=1;//圖片移動速度
    var yon=0;//設置圖片在Y軸移動的方向
    var xon=0;//設置圖片在X軸移動的方向


    function changePos(){
        var img=document.getElementById("float");
        var width=document.body.clientWidth;//瀏覽器寬度
        var height=document.body.clientHeight;//瀏覽器高度
        var Hoffset=img.offsetHeight;//漂浮圖片高度
        var Woffset=img.offsetWidth;//漂浮圖片寬度
        img.style.left=xPos+document.body.scrollLeft;//漂浮廣告距瀏覽器左側的位置
        img.style.top=yPos+document.body.scrollTop;//漂浮廣告距瀏覽器頂端的位置
        if(yon==0){
            yPos=yPos+step; //漂浮圖片在y軸方向上向下移動
        }else{
            yPos=yPos-step;//漂浮圖片在y軸方向上向上移動
        }
        //如果漂浮圖片飄到瀏覽器頂端時，設置圖片在y軸方向上向下移動
        if(yPos<0){
            yon=0;
            yPos=0;
        }
        //如果漂浮圖片飄到瀏覽器低端時，設置圖片在y軸方向上向上移動
        if(yPos>=height-Hoffset){
            yon=1;
            yPos=(height-Hoffset);
        }
        if(xon==0){
            xPos=xPos+step;//漂浮圖片在x軸方向向右移動
        }else{
            xPos=xPos-step;//漂浮圖片在x軸方向向左移動
        }
        //如果漂浮圖片飄到瀏覽器左側時，設置圖片在x軸方向上向右移動
        if(xPos>=(width-Woffset)){
            xon=1;
            xPos=(width-Woffset);
        }
        setTimeout("changePos()",30);
    }
    window.οnlοad=changePos();
</script>