漂浮广告，现在大部分网站为了突出最新的公告，特把漂浮广告做为了一个重要因素，现在把代码分享给大家。

       把下列的代码放到html文件中，即可看到效果。

JS代码：

<script src="http://www.xcsoft.cn/Public/js/jquery.js"></script>
<script>
    var _x=0;
    var _y=0;
    var _xs=10;
    var _ys=10;
    var _obj=document.getElementById("aa");
    var Win_width=$(document.body).width();
    var Win_height=$(document).height();
    //alert(Win_width)
    //alert(Win_height)
    var objwidth=_obj.offsetWidth;
    var objheight=_obj.offsetHeight;
    function _auto(){
        _y+=_ys;
        _x+=_xs;
        //alert(_x+"  "+_y)
        if(_x >=Win_width -objwidth-10 || _x<=0 )
            {_xs=-1*_xs;}
        //alert(Win_height+'-'+objheight)
        if(_y >= Win_height-objheight-10 || _y<=0 )
            {_ys=-1*_ys;}
        $("#aa").css({
            "top":_y,
            "left":_x,
        })
    }
    var _set=setInterval("_auto()",100)
    _obj.onmouseover=function(){
        clearInterval(_set)
    }
    _obj.onmouseout=function(){
        _set=setInterval("_auto()",100)
    }
</script>

HTML代码：

<div id="aa" style="position:absolute; height:100px; width:100px; background:#F00; top:10; left:10; color:#FFF; line-height:100px; vertical-align:middle; text-align:center; font-size:30px;">广告</div>

标签  技巧网页制作

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)