首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 培训 数据库 书店 程序员
中国软件网
欢迎您:游客 | 登录 注册 帮助
    • 求一段JAVAScript 特效代码
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • penweizgx
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    • 揭贴率：
    发表于：2008-08-24 00:59:20 楼主
    当鼠标经过一个小的图片或文字时，会自动弹出相关的大图片或是相关的详细文字类容，并且有线将两个关联图片或文字连接，根据网页的大小自动改变显示的方向。（常见网站首页导航，或产品介绍）
    100  修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • sxn19811006
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-08-24 09:13:401楼 得分:0
    学习
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • chinmo
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：

    • 2

      6
    发表于：2008-08-24 10:58:482楼 得分:0
    JS模拟DIV
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • LonelyStark
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-08-24 11:45:123楼 得分:0
    最简单的就是html的title属性
    但是达不到你要的复杂效果
    你要的效果只能涌div或者table的绝对定位
    根据鼠标的位置

    具体代码么
    因为太长了
    再说很多网站都有现成的例子
    你随便找个拷贝
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • sword_88
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-08-24 13:48:174楼 得分:0
    have a look!
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • penweizgx
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-08-28 16:36:585楼 得分:0
    我以前是在那个网站看见的。。代码好像是有点多。。
    现在要用的时候找不到了
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • mataofq
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-08-28 16:41:276楼 得分:0
    会自动弹出相关的大图片或是相关的详细文字类容，//这个好说。。。csdn的头像类似做法
    并且有线将两个关联图片或文字连接，根据网页的大小自动改变显示的方向//这个需求有点意思，可是怎么判断方向和连接的线怎么实现？？
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • penweizgx
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-09-08 14:17:457楼 得分:0
    "网页的大小自动改变显示的方向//这个需求有点意思"
    如果这个小图片要是靠近窗口的右边，要是弹出的大的还是在右边显示肯定是显示不出来赛。这时只能在左边显示撒。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • ningxuan17
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-09-08 15:06:368楼 得分:0
    我做过类似的，是用层来实现的，但是你要要求根据网页的大小自动改变显示的方向，这个我就不知道该怎么控制了，，一般都固定了的
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • ningxuan17
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-09-08 15:17:499楼 得分:0
    做了一个，你参考下：

    <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>

    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • aspdontnet
    • 等级:
    • 可用分等级：
    • 总技术分：
    • 总技术分排名：
    发表于：2008-09-09 15:52:1610楼 得分: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>
    <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>
    修改 删除 举报 引用 回复
    网站简介－广告服务－网站地图－帮助－联系方式－诚聘英才－English－ 问题报告
    北京创新乐知广告有限公司 版权所有 京 ICP 证 070598 号
    世纪乐知(北京)网络技术有限公司 提供技术支持
    Copyright © 2000-2008, CSDN.NET, All Rights Reserved