Jquery 左右浮动广告

View Code
<!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"><!-- 给BODY加个样式，让页面出现滚动条 -->   
    <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-05-27 10:03  轩~雨~阁  阅读(1133)  评论(0)  编辑  收藏  举报