黑马程序员技术交流社区

标题: 如何实现跨框架的下拉菜单 [打印本页]
作者: 风之旅人    时间: 2015-6-21 09:49
标题: 如何实现跨框架的下拉菜单
         使用frame或者iframe后，我的子菜单无法跨出框架。
         你可以把鼠标移动到黑马论坛的“视频下载” 上，它就蹦出了框架了，这样的效果如何实现？
         如能解决，15黑马币奉上
作者: hakey    时间: 2015-6-21 09:49
1、frame不能脱离frameSet单独使用，iframe可以；

2、frame不能放在body中；如下可以正常显示：
<!--<body>-->
<frameset rows="50%,*">
   <frame   name="frame1"   src="test1.htm"/>  
   <frame   name="frame2"   src="test2.htm"/>  
</frameset>
<!--<body>-->

如下不能正常显示：
<body>
<frameset rows="50%,*">
   <frame   name="frame1"   src="test1.htm"/>  
   <frame   name="frame2"   src="test2.htm"/>  
</frameset>
<body>

3、嵌套在frameSet中的iframe必需放在body中；如下可以正常显示：
  <body>
    <frameset>  
      <iframe   name="frame1"   src="test1.htm"/>  
      <iframe   name="frame2"   src="test2.htm"/>  
    </frameset>  
  </body>
如下不能正常显示：

  <!--<body>-->
    <frameset>  
      <iframe   name="frame1"   src="test1.htm"/>  
      <iframe   name="frame2"   src="test2.htm"/>  
    </frameset>  
  <!--</body>-->


4、不嵌套在frameSet中的iframe可以随意使用；
     如下均可以正常显示：
<body>
   <iframe   name="frame1"   src="test1.htm"/>  
   <iframe   name="frame2"   src="test2.htm"/>  
</body>


<!--<body>-->
   <iframe   name="frame1"   src="test1.htm"/>  
   <iframe   name="frame2"   src="test2.htm"/>  
<!--</body>-->
5、如果在同一个页面使用了两个以上的iframe，在IE中可以正常显示，在firefox中只能显示出第一个；使用两个以上的frame在IE和firefox中均可正常

希望可以帮到你。
作者: 风之旅人    时间: 2015-6-21 10:03
类似于这样

作者: 纪青超    时间: 2015-6-21 15:24
这是用什么技术进行实现的啊，跳出框架不太明啊。
作者: 风之旅人    时间: 2015-6-21 15:29
纪青超 发表于 2015-6-21 15:24
这是用什么技术进行实现的啊，跳出框架不太明啊。

html     css        javaScript          jquery     
能实现就成  
作者: 纪青超    时间: 2015-6-21 15:29
这是用什么技术进行实现的啊，跳出框架不太明啊。
作者: 逝....曾经    时间: 2015-6-21 18:25
我在网上百度的，你看对你有帮助没  
作者: 逝....曾经    时间: 2015-6-21 18:27
我在网上百度的，你看对你有帮助没  http://www.cnblogs.com/lxfgood/archive/2011/03/28/1997501.html
作者: Coolman    时间: 2015-6-22 18:55
onmouseover="showMenu({'ctrlid':this.id,'ctrlclass':'hover','duration':2})" // 这是“视频下载”的源码
当鼠标移动到上面时，设置菜单的显示事件
作者: lucien_he    时间: 2015-6-22 21:54
瞅瞅 前台，啊
作者: Diors    时间: 2015-6-25 17:17
你要找的JS的鼠标事件onMouseOver么？
作者: αメ炫    时间: 2015-6-25 21:07
都不知道你在说什么，首先frameset框架集已经从html标准中淘汰了，应该避免使用frameset\frame，iframe可以使用，但也尽量减少使用，操作iframe的代码也存在兼容性问题，通常用在富文本编辑器、上传控件等。
至于你说的鼠标移动到菜单上会出现下拉菜单，这些都是div ul li 结构就能实现也根本不需要iframe，要说实现的话，可以事先把菜单准备好放在下面，当鼠标移到上面hover之后把它显示出来就行了，离开在display:none
作者: pacio    时间: 2015-7-7 09:57
这个用html+css+js实现很简单啊
<head>
<style>
.nav{background-color:#333; width:80px; height:40px; position:relative;}
.nav a{line-height:40px; color:#FFF; text-align:center; display:block;}
.ulist{ list-style:none; position:absolute; left:-32px; top:32px; display:none;}
.ulist li{ width:80px; height:32px; line-height:32px; text-align:center; font-size:12px;}
.ulist li a{background-color:#F60; display:block;}
.ulist li a:hover{ background-color:#F90;}
</style>
</head>

<body>
<div class="nav">
<a>视频下载</a>
</div>
<ul class="ulist">
<li><a>java视频下载</a></li>
<li><a>php视频下载</a></li>
<li><a>ios视频下载</a></li>
</ul>

</body>
</html>
<script>

var oDiv = document.getElementsByTagName('div')[0];
var oUl = document.getElementsByTagName('ul')[0];

     oDiv.onclick = function(){
                 
                 
                 if(oUl.style.display = 'none'){
                  oUl.style.display = 'block';
                 }else{
                  oUl.style.display = 'none';
                 }
                 
                 }


</script>
作者: norwood    时间: 2015-7-13 07:24
和我qq头像一样呢，樱木花道:loveliness:



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2