求iframe特效？

shankaipingo 2009-08-17 10:06:49
我在ajax toolkit中看到menu或者navibar的展开特效．一点一下条目，菜单缓存展开．
请问iframe能不能做到这个效果了？
代码哪有．
...全文
162 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
shankaipingo 2009-08-17
  • 打赏
  • 举报
 回复
IHandler你给我的是div版本的．不是iframe版本的
Pig23 2009-08-17
  • 打赏
  • 举报
 回复
并不是什么都要用jquery，一个小应用用js写2-3k，用jq加载都需要56k
IHandler 2009-08-17
  • 打赏
  • 举报
 回复 


<!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>JavaScript点击文字滑出下拉列表- codefans.net</title>

	<style type="text/css">

	/* Start of css that is not needed for the script */

	body{

		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;

		margin-top:0px;

		background-image:url('../../images/heading3.gif');

		background-repeat:no-repeat;

		padding-top:100px;

	}

	p{

		margin-top:0px;

	}

	a{

		color:#660000;

		text-decoration:none;



	}	

	/* End of css that is not needed for the script */

	

	/* Don't delete anything below here */

	.dhtmlgoodies_contentBox{

		border:1px solid #317082;

		height:0px;

		visibility:hidden;

		position:absolute;

		background-color:#E2EBED;

		overflow:hidden;

		padding:2px;

		width:250px;

				

	}

	.dhtmlgoodies_content{

		position:relative;		

		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;

		width:100%;

		font-size:0.8em;

		

	}



	</style>

<script type="text/javascript">

var slideDownInitHeight = new Array();

	var slidedown_direction = new Array();

	var slidedownActive = false;

	var contentHeight = false;

	var slidedownSpeed = 3; 	// Higher value = faster script

	var slidedownTimer = 7;	// Lower value = faster script

	function slidedown_showHide(boxId)

	{

		if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;

		if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;

		

		if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;

		

		slidedownContentBox = document.getElementById(boxId);

		var subDivs = slidedownContentBox.getElementsByTagName('DIV');

		for(var no=0;no<subDivs.length;no++){

			if(subDivs[no].className=='dhtmlgoodies_content')slidedownContent = subDivs[no];	

		}



		contentHeight = slidedownContent.offsetHeight;

	

		slidedownContentBox.style.visibility='visible';

		slidedownActive = true;

		slidedown_showHide_start(slidedownContentBox,slidedownContent);

	}

	function slidedown_showHide_start(slidedownContentBox,slidedownContent)

	{



		if(!slidedownActive)return;

		slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];

		if(slideDownInitHeight[slidedownContentBox.id] <= 0){

			slidedownActive = false;	

			slidedownContentBox.style.visibility='hidden';

			slideDownInitHeight[slidedownContentBox.id] = 0;

		}

		if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){

			slidedownActive = false;	

		}

		slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';

		slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';



		setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);

	}

	

	function setSlideDownSpeed(newSpeed)

	{

		slidedownSpeed = newSpeed;

		

	}

	</script>	



</head>

<body>

<div>

	<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box1');return false;">Try it</a></div>



	<div class="dhtmlgoodies_contentBox" id="box1">

		<div class="dhtmlgoodies_content" id="subBox1">

			<!-- slide down content goes here -->

			This is the content we want to show<br>

			This is the content we want to show<br>

			This is the content we want to show<br>

			This is the content we want to show

			<!-- End slide down content -->



		</div>

	</div>

</div>

<div>

Other content<br>

Other content<br>

Other content<br>

<div>

<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box2');return false;">Try another box</a></div>

	<div class="dhtmlgoodies_contentBox" id="box2">



		<div class="dhtmlgoodies_content" id="subBox2">

			<!-- slide down content goes here -->

			This is the content of another box<br>

			<!-- End slide down content -->

		</div>

	</div>

</div>

<script type="text/javascript">

setSlideDownSpeed(4);

</script>

</body>



</html>
IHandler 2009-08-17
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 shankaipingo 的回复:]
找到了，但好你是用jquery，不用jquery行不？
[/Quote]
不用JQUERY，写JS的话要很多代码，没现成的，只能google了
ruanwei1987 2009-08-17
  • 打赏
  • 举报
 回复
楼主不要急，我这给你顶起
shankaipingo 2009-08-17
  • 打赏
  • 举报
 回复
找到了，但好你是用jquery，不用jquery行不？
IHandler 2009-08-17
  • 打赏
  • 举报
 回复 


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title></title>

<script language="javascript" src="lib/jquery.js"></script>

<script language="javascript" type="text/jscript">

function ShowHideChildMenu()

{

	$(document).ready(function() {

	

         var answer = $("#childMenuA");

         if (answer.is(':visible')) {

             answer.slideUp();

         } else {

             answer.slideDown();

         }

     });

}

</script>

</head>

<body>

<table width="180" border="0" cellpadding="0" cellspacing="0">

      <tr>

        <td height="20">  日常办公</td>

        <td height="20" id="ParentMenuA" class="Menu" onClick="ShowHideChildMenu()" ><div align="right">点我</div></td>

      </tr>

      <tr>

        <td colspan="2" valign="top">

		<div id="childMenuA" style="display:none ">

		<table width="100%" border="0" cellspacing="0" cellpadding="0">

          <tr>

            <td width="28%" height="20" align="right"><img src="images/background/joinbottom.gif" width="19" height="20"></td>

            <td width="72%" height="20" class="MenuChildFont"><a href="NewsRetireve.html" target="ifrMain" onClick="changeClass(this)">信息公告</a></td>

          </tr>

          <tr>

            <td height="20" align="right"><img src="images/background/joinbottom.gif" width="19" height="20"></td>

            <td height="20" class="MenuChildFont">我的邮件</td>

          </tr>

          <tr>

            <td height="20" align="right"><img src="images/background/joinbottom.gif" width="19" height="20"></td>

            <td height="20" class="MenuChildFont">工作任务</td>

          </tr>

          <tr>

            <td height="20" align="right"><img src="images/background/joinbottom.gif" width="19" height="20"></td>

            <td height="20" class="MenuChildFont">日程安排</td>

          </tr>

          <tr>

            <td height="20" align="right"><img src="images/background/joinbottom.gif" width="19" height="20"></td>

            <td height="20" class="MenuChildFont">考勤信息</td>

          </tr>

          <tr>

            <td height="20" align="right"><img src="images/background/join.gif" width="19" height="20"></td>

            <td height="20" class="MenuChildFont">消息管理</td>

          </tr>

        </table>

		</div>

		</td>

      </tr>

 </table>     

</body>

</html>

你需要下载JQuery的Lib（<script language="javascript" src="lib/jquery.js"></script>）
下载 这个不是最新版。在此例子中可以使用
下载解压后，把lib文件夹拷贝到和当前HTML同一级目录
virusswb 2009-08-17
  • 打赏
  • 举报
 回复
这个用JQuery实现再简单不过了

http://www.robysky.com/archives/158

http://bbs.blueidea.com/thread-2827315-1-409.html

http://www.cnblogs.com/goodspeed/archive/2009/04/06/1430184.html
IHandler 2009-08-17
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 shankaipingo 的回复:]
不用jquery成不成？我不懂这东西．
[/Quote]
你看看我给的链接中找toggle，很简单
IHandler 2009-08-17
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 shankaipingo 的回复:]
不用jquery成不成？我不懂这东西．
[/Quote]
用javascript也能实现
shankaipingo 2009-08-17
  • 打赏
  • 举报
 回复
不用jquery成不成？我不懂这东西．
IHandler 2009-08-17
  • 打赏
  • 举报
 回复
参考
IHandler 2009-08-17
  • 打赏
  • 举报
 回复
这个用JQuery
wuyq11 2009-08-17
  • 打赏
  • 举报
 回复
<script type="text/javascript">
var m_id = "", m_expand = "";
var flag = 0, sflag = 0;
function doMenu(id) {
var targetid, targetelement;
var strbuf;
var p = document.getElementById(id);
if (p==null)
return;
targetid = p.id + "c";
targetelement = document.getElementById(targetid);
var expandUL = document.getElementById(m_expand + "c");
var expandLink = document.getElementById(m_expand);
if (targetelement.style.display == "none") {
if (expandUL && expandLink && p.id.substr(0, 1) == "m") {
expandLink.className = "";
expandUL.style.display = 'none';
}
if (p.id.substr(0, 1) == "m")
m_expand = p.id;
p.className = "active";
targetelement.style.display = '';
menu_flag = 0;
}
else {
p.className = "";
targetelement.style.display = "none";
menu_flag = 1;
var links = document.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
p = links[i];
if (p.parentNode.className.toUpperCase() == "L1" && p.className == "active" && p.id.substr(0, 1) == "m") {
menu_flag = 0;
break;
}
}
}
}
</script>
<div id="body" style="height:480px;overflow:auto; border-collapse:collapse; SCROLLBAR-FACE-COLOR: #D7DFEC;SCROLLBAR-HIGHLIGHT-COLOR: #848FA3;SCROLLBAR-SHADOW-COLOR: #848FA3;SCROLLBAR-3DLIGHT-COLOR: #ffffff;SCROLLBAR-ARROW-COLOR: #79aeff;SCROLLBAR-TRACK-COLOR: #B3BECE;SCROLLBAR-DARKSHADOW-COLOR: #ffffff;">
<ul id="menu">

<li class="L1"><a href="javascript:doMenu('m1');" id="m1"><span><img src="../../images/1.gif" align="absMiddle"/> 个人</span></a></li>
<ul id="m1c" style="display:none;" class="U1">
<li class="L21"><a href="javascript:doMenu('s16');" id="s16"><span>
<img src="../../images/menu/2.gif" align="absMiddle"/> 短消息</span></a></li>
<ul id="s16c" style="display:none;">
<li class="L3"><a href="../a.aspx" target="main"><span>短信</span></a></li>
</ul></li>
<li class="L22"><a href="../b.aspx" target="main"><span>个人</span></a></li>
<li class="L22"><a href="../b.aspx" target="main"><span>日程</span></a></li>
</ul></li>

<li class="L1"><a href="javascript:doMenu('m7');" id="m7"><span><img src="../../images/3.gif" align="absMiddle"/> 信息中心</span></a></li>
<ul id="m7c" style="display:none;" class="U1">
<li class="L22"><a href="../c.aspx" target="main"><span>新闻</span></a></li>
<li class="L22"><a href="../d.aspx" target="main"><span>公告</span></a></li>
<li class="L22"><a href="../e.aspx" target="main"><span>内部</span></a></li>
</ul></li>
</ul>
</div>
chenyunkun2008 2009-08-17
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 ihandler 的回复:]
HTML code<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/><title></title><scriptlanguage="javascript" src="lib/jquery.js"></script><scriptlanguage="javascript" type="text/jscript">function ShowHideChildMenu()
{
$(document).ready(function() {var answer= $("#childMenuA");if (answer.is(':visible')) {
answer.slideUp();
}else {
answer.slideDown();
}
});
}</script></head><body><tablewidth="180" border="0" cellpadding="0" cellspacing="0"><tr><tdheight="20">  日常办公</td><tdheight="20" id="ParentMenuA" class="Menu" onClick="ShowHideChildMenu()"><divalign="right">点我</div></td></tr><tr><tdcolspan="2" valign="top"><divid="childMenuA" style="display:none "><tablewidth="100%" border="0" cellspacing="0" cellpadding="0"><tr><tdwidth="28%" height="20" align="right"><imgsrc="images/background/joinbottom.gif" width="19" height="20"></td><tdwidth="72%" height="20" class="MenuChildFont"><ahref="NewsRetireve.html" target="ifrMain" onClick="changeClass(this)">信息公告</a></td></tr><tr><tdheight="20" align="right"><imgsrc="images/background/joinbottom.gif" width="19" height="20"></td><tdheight="20" class="MenuChildFont">我的邮件</td></tr><tr><tdheight="20" align="right"><imgsrc="images/background/joinbottom.gif" width="19" height="20"></td><tdheight="20" class="MenuChildFont">工作任务</td></tr><tr><tdheight="20" align="right"><imgsrc="images/background/joinbottom.gif" width="19" height="20"></td><tdheight="20" class="MenuChildFont">日程安排</td></tr><tr><tdheight="20" align="right"><imgsrc="images/background/joinbottom.gif" width="19" height="20"></td><tdheight="20" class="MenuChildFont">考勤信息</td></tr><tr><tdheight="20" align="right"><imgsrc="images/background/join.gif" width="19" height="20"></td><tdheight="20" class="MenuChildFont">消息管理</td></tr></table></div></td></tr></table></body></html>
你需要下载JQuery的Lib（ <script language="javascript" src="lib/jquery.js"> </script>）
下载 这个不是最新版。在此例子中可以使用
下载解压后，把lib文件夹拷贝到和当前HTML同一级目录
[/Quote]


不错
Lovely_baby 2009-08-17
  • 打赏
  • 举报
 回复
iframe只是在布局
使用js能做到
wuyq11 2009-08-17
  • 打赏
  • 举报
 回复
通过iframe结合js,div实现，可看看通达OA。
js 特效 html 特效 Iframe页面的滚动
js 特效 html 特效 Iframe页面的滚动
js 特效 html 特效 链接在IFRAME中显示
js 特效 html 特效 链接在IFRAME中显示 js 特效 html 特效 链接在IFRAME中显示
js 特效 html 特效 IFRAME间链接变换
js 特效 html 特效 IFRAME间链接变换
js 特效 html 特效 滚动的iframe页面
js 特效 html 特效 滚动的iframe页面 js 特效 html 特效 滚动的iframe页面
iframe调用加loading特效
iframe调用加loading特效特别合适远程调用速度慢而等待问题，简单方便
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章