黑马程序员技术交流社区

标题: 如何实现跨框架的下拉菜单 [打印本页]

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

作者: hakey 时间: 2015-6-21 09:49
1、frame不能脱离frameSet单独使用，iframe可以；

2、frame不能放在body中；如下可以正常显示：

<frameset rows="50%,*">
<frame name="frame1" src="test1.htm"/>
<frame name="frame2" src="test2.htm"/>
</frameset>


如下不能正常显示：
<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>
如下不能正常显示：

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

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


<iframe name="frame1" src="test1.htm"/>
<iframe name="frame2" src="test2.htm"/>

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