• jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用


    代码
    <!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>jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用</title>
        
    <style type="text/css">
            #divShow
    {width:100px;height:50px;background-color:Green;display:none;}
            #divAd
    {width:100px;height:100px;background-color:Red;position:absolute;top:100px;left:100px;}
        
    </style>
        
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        
    <script type="text/javascript">
            
    //在文本框下方显示一个div,类似日历控件那样。
            function showDiv(obj){
                jQuery(
    "#divShow").css("left",jQuery(obj).offset().left);
                jQuery(
    "#divShow").css("top",jQuery(obj).offset().top + jQuery(obj).outerHeight());
                
                jQuery(
    "#divShow").show();
            }
            jQuery(
    function(){
            
            });
            
    //滚动条滚动,执行下面的函数,适合做浮动广告
            jQuery(this).scroll(function(){
                jQuery(
    "#divAd").css("top",100 + jQuery(document).scrollTop());
                jQuery(
    "#divAd").css("left",100 + jQuery(document).scrollLeft());
            });
        
    </script>
    </head>
    <body>
        
    <input type="text" value="ok" onclick="showDiv(this);" />
        
    <div id="divShow">2010-03-22</div>
        
    <div id="divAd">浮动广告</div>
        
    <div style="height:2000px;2000px;">用来撑出滚动条</div>
    </body>
    </html>
  • 相关阅读:
    Suricata的输出
    Setting up IPS/inline for Linux in Suricata
    Suricata的初始化脚本
    Suricata的Reputation
    Suricata的配置
    Suricata的性能
    Suricata里的规则与Snort区别之处
    Suricata的命令行解释
    [转]ASP.NET 成员资格 Part.1(API)
    [转]ASP.NET MVC4+BootStrap 实战(一)
  • 原文地址:https://www.cnblogs.com/greatverve/p/1691636.html
Copyright © 2020-2023  润新知