• 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>
  • 相关阅读:
    将空值转换为实际值
    图像的几何变换(一)
    图像的代数运算
    灰度直方图均衡化的算数推导
    图像的点运算
    探索数据可视化,业务数据是核心
    Gazebo機器人仿真學習探索筆記(一)安裝與使用
    脐带血要不要保存?看了你就明白!
    linuxsvn源代码版本库建立
    svn(subversion)代码版本管理在linux下的一些常见使用命令
  • 原文地址:https://www.cnblogs.com/greatverve/p/1691636.html
Copyright © 2020-2023  润新知