top
元旦节到了,元旦节快乐...

固定当前背景  反馈、咨询、建议、留言等,请点这里[Alt+G]

本栏相关
其他文章
JavaScriptJavaScript当前位置:首页 >>开发技巧>>JavaScript
Jquery编写的漂浮广告
编辑yang 发布时间2014-09-11 浏览量2309 来源本站编辑 特大
摘要:漂浮广告,现在大部分网站为了突出最新的公告,特把漂浮广告做为了一个重要因素,现在把代码分享给大家。

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

       把下列的代码放到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>

标签  技巧网页制作

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


反馈/咨询/建议/留言(GuestBook)
您好,怎么称呼您!
您的姓名:
上一步:鼠标向上滚动/左方向键(←)
下一步或完成:鼠标向下滚动/Tab键/右方向键(→)
如果您有空的话,可以填一下您的相关信息!
您的电话:
您的邮箱:
现在,请填写您想要了解的信息!
信息内容:
验证码: 看不清?点图片刷新