js实例入门

来源：互联网发布：阿里国际站产品优化编辑：程序博客网时间：2024/06/06 08:28

提问帖：http://topic.csdn.net/u/20081218/10/9b08d8f4-e2cc-4aff-93d9-fd57625cf568.html

下载这个试试

http://topic.csdn.net/u/ui/scripts/Csdn/Forum/UserOnline1.js

<a href="http://hi.csdn.net/jxyxhz" target="_blank" title="进入用户个人空间"> <img src="http://avatar.profile.csdn.net/3/A/6/2_jxyxhz.jpg" onmouseover="javascript:try{showUserCard(event,'jxyxhz')}catch(ex){};" alt="进入用户个人空间"> </a>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <script type="text/javascript">
    //显示div
    function outw(o)
    {
      var left,top;
      var obj=document.getElementById("out")
      obj.style.display="block";
      var z=getxy(o);//这里是一个数组。  
      
      //下面的作用是计算在哪个方位显示层，根据滚动条判断。
     var h=obj.style.height.replace('px','');
      if((z[1]-getlt().top)>h)
      {
         top=z[1]-h+'px';  
      }
      else
      {
         top=z[1]+'px';  
      }
      
      var w=obj.style.width.replace('px','');
      var r=document.body.clientWidth-getlt().left-w-z[0];
      //alert(document.body.clientWidth+'eee'+getlt().left+'ddd'+w+'ccc'+z[0]);
      if(r>w)
      {
         left=z[0]+z[2]+'px'; 
      }
      else
      {
         left=z[0]-w+'px';
      }
      obj.style.top=top;
      obj.style.left=left;
    }
    //取得滚动条逝去
    function getlt()
    {
      var top,left;
      top=document.documentElement.scrollTop;
      left=document.documentElement.scrollLeft;
     
      return {top:top,left:left};//调用方法：getlt().top
    }
    
    //取得坐标
    function getxy(e)
    {
        l=e.offsetLeft;
        t=e.offsetTop;
        r=e.offsetRight;
        b=e.offsetBottom;
        w=e.offsetWidth;
        h=e.offsetHeight;
        while(ee=e.offsetParent)//循环计算，全部父层，取得正确坐标。
        {l+=e.offsetLeft;t+=e.offsetTop;}
        return [l,t,w,h]//返回一个数组。
    }
    //隐藏
    function fhidden(o)
    {
      document.getElementById("out").style.display="none";
    }
    </script>
</head>
<body>
    <div style="height:120px;width:250px;text-align:center;position:absolute;left:20px;top:20px;display:none;background:blue;" id="out">
        <img src="images/login.gif" height="100px" style="padding:5px;" />
    </div>
    <div style="overflow:auto;width:300px;">
        学习js
        <a href="#" onmouseover="outw(this)" onmouseout="fhidden(this)">技术特点</a>
        学习js
    </div>
</body>
</html>