jquery 左右广告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>浮动广告</title>
    <style type="text/css">
        #qqonline{
            background-color:red;
            border: 1px solid #fcc;
            position:absolute;
            top:100px;
            left:16px;
            width:100px;
            height:120px;
        }
        #qqonline1{
         background-color:red;
            border: 1px solid #fcc;
            position:absolute;
            top:100px;
            right:16px;
            width:100px;
            height:120px;
        }
    </style>
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(this).scroll(function() {    // 页面发生scroll事件时触发
            var bodyTop = 0;
            if (typeof window.pageYOffset != 'undefined') {
                bodyTop = window.pageYOffset;
            }
             else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
             {
                bodyTop = document.documentElement.scrollTop;
            }
            else if (typeof document.body != 'undefined') {
                bodyTop = document.body.scrollTop;
            }

            $("#qqonline").css("top", 100 + bodyTop)   // 设置层的CSS样式中的top属性, 注意要是小写，要符合“标准”
            $("#qqonline").text(bodyTop);   // 设置层的内容，这里只是显示当前的scrollTop
            $("#qqonline1").css("top", 100 + bodyTop)   // 设置层的CSS样式中的top属性, 注意要是小写，要符合“标准”
            $("#qqonline1").text(bodyTop);   // 设置层的内容，这里只是显示当前的scrollTop
        });
    </script>
</head>
<body style="height:1800px">
    <form id="form1" runat="server">
    </form>
    <div id="qqonline">
        QQ在线服务
    </div>
     <div id="qqonline1">
        QQfsdf在线服务
    </div>
</body>
</html>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wangjun8868/archive/2008/10/30/3185868.aspx

posted @ 2011-06-02 09:53 张立余阅读(145) 评论(0) 收藏举报

刷新页面返回顶部