jQuery实现的浮动广告

最新推荐文章于 2022-11-10 08:40:49 发布

greatverve

最新推荐文章于 2022-11-10 08:40:49 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/greatverve/article/details/3601138

版权

JS.JQuery 专栏收录该内容

33 篇文章 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>
    <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="../js/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)     
            $("#qqonline1").text(bodyTop);     
        });     
    </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>   
 

end

greatverve

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现的浮动广告

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

扫一扫

专栏目录