jquery左右浮动广告

最新推荐文章于 2024-08-03 00:35:09 发布

编程有钱人了

最新推荐文章于 2024-08-03 00:35:09 发布

阅读量5.2k

点赞数

分类专栏： jquery 文章标签： jquery scroll server css function qq

本文链接：https://blog.csdn.net/wangjun8868/article/details/3185868

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 
 <!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>  
 

编程有钱人了

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jquery左右浮动广告

html xmlns="http://www.w3.org/1999/xhtml"> head runat="server"> title>浮动广告title> style type="text/css"> #qqonline{ background-color:red;
复制链接

扫一扫

专栏目录