求一段JAVAScript 特效代码

当鼠标经过一个小的图片或文字时，会自动弹出相关的大图片或是相关的详细文字类容，并且有线将两个关联图片或文字连接，根据网页的大小自动改变显示的方向。（常见网站首页导航，或产品介绍）

解决方案 »

  1.   

    最简单的就是html的title属性
    但是达不到你要的复杂效果
    你要的效果只能涌div或者table的绝对定位
    根据鼠标的位置具体代码么
    因为太长了
    再说很多网站都有现成的例子
    你随便找个拷贝
      

  2.   

    会自动弹出相关的大图片或是相关的详细文字类容，//这个好说csdn的头像类似做法
    并且有线将两个关联图片或文字连接，根据网页的大小自动改变显示的方向//这个需求有点意思，可是怎么判断方向和连接的线怎么实现？？
      

  3.   

    做了一个，你参考下：<STYLE type=text/css>
    .background{ background-color:#999999;
    height:50px;}
    #Layer1 {
    Z-INDEX: 1; WIDTH: 100px; POSITION: absolute; HEIGHT: 20px
    }
    #Layer2 {
    Z-INDEX: 2; LEFT: -1px; VISIBILITY: hidden; WIDTH: 90px; POSITION: absolute; TOP: 1px; HEIGHT: 0px
    }
    #Layer3 {
    Z-INDEX: 2; LEFT: 34px; VISIBILITY: hidden; WIDTH: 90px; POSITION: absolute; TOP: 0px; HEIGHT: 0px
    }
    #Layer4 {
    Z-INDEX: 2; LEFT: 102px; VISIBILITY: hidden; WIDTH: 90px; POSITION: absolute; TOP: 0px; HEIGHT: 0px
    }
    </STYLE><SCRIPT type=text/JavaScript>
    <!--
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }function MM_showHideLayers() { //v6.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
    }
    //-->
    </SCRIPT><TABLE cellSpacing=0 cellPadding=0 width=1002 bgColor=#f8f8f8 border=0>
      <TBODY>
      <TR>
        <TD vAlign=bottom><a href="#" onMouseOver="MM_showHideLayers('Layer2','','show')" 
      onmouseout="MM_showHideLayers('Layer2','','hide')" 　　　　>aa</a>　　　<a href="#" onMouseOver="MM_showHideLayers('Layer3','','show')" 
      onmouseout="MM_showHideLayers('Layer3','','hide')" >bb</a>　　　<a href="#" onMouseOver="MM_showHideLayers('Layer4','','show')" 
      onmouseout="MM_showHideLayers('Layer4','','hide')" >cc</a> </TD>
      </TR></TBODY></TABLE>
    <DIV id=Layer1>
          <DIV id=Layer2 onMouseOver="MM_showHideLayers('Layer2','','show')" 
          onmouseout="MM_showHideLayers('Layer2','','hide')">
      <div class="background"> AAAAAA</div></DIV>
          <DIV id=Layer3 onMouseOver="MM_showHideLayers('Layer3','','show')" 
          onmouseout="MM_showHideLayers('Layer3','','hide')">
      <div class="background"> BBB</div></DIV>
          <DIV id=Layer4 onMouseOver="MM_showHideLayers('Layer4','','show')" 
          onmouseout="MM_showHideLayers('Layer4','','hide')">
      <div class="background">CCCCC</div></DIV>
    </DIV>
    </DIV>
      

  4.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    .area .col2{float:left; width:25px;}
    .focusArea .col2{ float:right; width:497px; margin:0 1px 0 0; display:inline; background:#FAFAFA;height:320px; overflow:hidden; }
    .focusPic{clear:both; margin:0 auto; width:464px; padding:16px 0 0;text-align:left;}
    .focusPic .pic{clear:both; height:250px; overflow:hidden;}
    .focusPic .pic img{border:1px solid #ccc;}
    .focusPic .pic ul{float:right; width:97px;}
    .focusPic .pic li{clear:both; text-align:right; padding:0 0 9px;}
    .focusPic .pic .active{ background:url(http://cimg2.163.com/cnews/img/bg1.gif) 0 -454px no-repeat;}
    .focusPic .pic .active img{padding:2px; background:#fff; border:1px solid #1f3a87;}
    .focusPic .pic .active img:hover{border:1px solid #bc2931;}
    .focusPic h2{clear:both; font-size:14px; font-weight:bold;}
    .focusPic .text{line-height:19px; padding:5px 12px 0 0;}
    .left{ float: left;}
    .foot .text{padding:3px 0 6px; border-bottom:1px solid #000; margin:0 0 5px; clear:both;}
    /* CSS Document */
    body {text-align:center;font-family: 宋体, serif;  margin:0; padding:0; background: #fff; font-size:12px; color:#000;}
    div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border:0; }
    h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-size:12px; font-weight:normal;}
    table,td,tr,th{font-size:12px;}
    li{list-style-type:none;}
    input,button{cursor:pointer;}
    img{vertical-align:top;}
    table{margin:0 auto;}
    /* 链接颜色*/
    a:link {color: #000; text-decoration:none;}
    a:visited {color: #83006f;text-decoration:none;}
    a:hover {color: #bc2931; text-decoration:underline;}
    a:active {color: #bc2931;}
    /* 颜色属性*/
    .cRed,a.cRed:link,a.cRed:visited{ color:Red; }
    .cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
    .cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}
    .cGray,a.cGray:link,a.cGray:visited{ color: #333;}
    .cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
    .cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
    .cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
    a.cBlack:hover{color:#bc2931;}
    .cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}
    .cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}
    /* 字体属性*/
    .fB {font-weight: bold;}
    .fI {font-style: italic;}
    /* 字体大小*/
    .f12px{ font-size:12px;}
    .f14px{ font-size:14px;}
    /* 其他属性*/
    .left{ float: left;}
    .right{ float: right;}
    .clear{ clear: both; font-size:1px; width:1px; height:0; overflow:hidden; }
    .hidden {display: none;}
    .unLine ,.unLine a{text-decoration: none;}
    .noBorder{border:none;        }
    </style>
    <script language="JavaScript">
    function showFocus(num)
    {
     for(var id = 1;id<=4;id++)
     {
      var fpid="focusPic"+id;
      var fcid="focusContent"+id;
      var fnid="focusnav"+id;
      if(id==num){
              try{document.getElementById(fpid).style.display="block"}catch(e){};
            try{document.getElementById(fcid).style.display="block"}catch(e){};
            try{document.getElementById(fnid).className="active"}catch(e){};
      }else{
            try{document.getElementById(fpid).style.display="none"}catch(e){};
            try{document.getElementById(fcid).style.display="none"}catch(e){};
            try{document.getElementById(fnid).className=""}catch(e){};
      }
     }  
    }
    </script>
    </head>
    <body>
      <div class="col2">
      
        <div class="focusPic">
          <div class="pic">
            <div id="focusPic1" style="display:block;"><a href="http://news.163.com/08/0529/06/4D3EK93A00012MS7.html"><img src="http://cimg21.163.com/cnews/2008/5/29/20080529063645633e1.jpg" alt="陕西灾区学生烈日下备战高考" width="360" height="240" border="0" class="left" /></a></div>
            <div id="focusPic2" style="display:none;"><a href="http://news.163.com/08/0529/04/4D376PV90001124J.html"><img src="http://cimg21.163.com/cnews/2008/5/29/20080529042010e2865.jpg" alt="内蒙古浮尘远飘青岛" width="360" height="240" border="0" class="left" /></a></div>
            <div id="focusPic3" style="display:none;"><a href="http://news.163.com/08/0528/15/4D1S66GQ000120GU.html"><img src="http://cimg21.163.com/cnews/2008/5/29/2008052909284405e57.jpg" alt="胡锦涛会见国民党主席吴伯雄" width="360" height="240" border="0" class="left" /></a></div>
            <div id="focusPic4" style="display:none;"><a href="http://cimg21.163.com/cnews/2008/5/29/20080529092409c16e0.jpg"><img src="http://cimg21.163.com/cnews/2008/5/28/20080528042715c7168.jpg" alt="贵州暴雨山洪造成人死亡13人失踪" width="360" height="240" border="0" class="left" /></a></div>
            <ul>
              <li id="focusnav1" class="active" onmouseover="javascript:showFocus(1);"><a href="http://news.163.com/08/0529/06/4D3EK93A00012MS7.html"><img src="http://cimg21.163.com/cnews/2008/5/29/20080529063645633e1.jpg" width="75" height="50" alt="陕西灾区学生烈日下备战高考" border="0" /></a></li>
              <li id="focusnav2" class="" onmouseover="javascript:showFocus(2);"><a href="http://news.163.com/08/0529/04/4D376PV90001124J.html"><img src="http://cimg21.163.com/cnews/2008/5/29/20080529042010e2865.jpg" width="75" height="50" alt="内蒙古浮尘远飘青岛" border="0" /></a></li>
              <li id="focusnav3" class="" onmouseover="javascript:showFocus(3);"><a href="http://news.163.com/08/0528/15/4D1S66GQ000120GU.html"><img src="http://cimg21.163.com/cnews/2008/5/29/2008052909284405e57.jpg" width="75" height="50" alt="胡锦涛会见国民党主席吴伯雄" border="0" /></a></li>
              <li id="focusnav4" class="" onmouseover="javascript:showFocus(4);"><a href="http://cimg21.163.com/cnews/2008/5/29/20080529092409c16e0.jpg"><img src="http://cimg21.163.com/cnews/2008/5/28/20080528042715c7168.jpg" width="75" height="50" alt="贵州暴雨山洪造成人死亡13人失踪" border="0" /></a></li>
            </ul>
                          </div>
             <div id="focusContent1" style="display:block;">
              <h2><a href="http://news.163.com/08/0529/06/4D3EK93A00012MS7.html">陕西灾区学生烈日下备战高考</a></h2>
              <div class="text">由于帐篷闷热，宁强县多名学生的很多课程只能放到帐篷外上。<a href="http://news.163.com/08/0529/06/4D3EK93A00012MS7.html" class="cDRed">[详细]</a></div>
              </div>
             <div id="focusContent2" style="display:none;">
              <h2><a href="http://news.163.com/08/0529/04/4D376PV90001124J.html">内蒙古浮尘远飘青岛</a></h2>
              <div class="text">5月日，内蒙古出现大范围扬沙和沙尘暴天气。日，浮尘飘移至青岛<a href="http://news.163.com/08/0529/04/4D376PV90001124J.html" class="cDRed">[详细]</a></div>
              </div>
             <div id="focusContent3" style="display:none;">
              <h2><a href="http://news.163.com/08/0528/15/4D1S66GQ000120GU.html">胡锦涛会见国民党主席吴伯雄</a></h2>
              <div class="text">这是在台湾局势发生积极变化形势下，两党最高领导人之间的首次会谈。<a href="http://news.163.com/08/0528/15/4D1S66GQ000120GU.html" class="cDRed">[详细]</a></div>
              </div>
             <div id="focusContent4" style="display:none;">
              <h2><a href="http://cimg21.163.com/cnews/2008/5/29/20080529092409c16e0.jpg">贵州暴雨山洪造成人死亡13人失踪</a></h2>
              <div class="text">贵州全省已有个县不同程度受灾，因灾毁损房屋多间。<a href="http://cimg21.163.com/cnews/2008/5/29/20080529092409c16e0.jpg" class="cDRed">[详细]</a></div>
              </div>
        </div>
      </div>
    </div>
    </body>
    </html>