<script> //滑动层 function shoppingcat() { if(content.style.pixelHeight<500) { //content.style.pixelLeft-=5 content.style.pixelHeight+=5 setTimeout('shoppingcat()',1) } } </script> <div id=content style="position:absolute; width:200; height:50;background:#eee; left:300; top:50;padding:10;border:4px #ccc double;font:13px/25px;overflow:hidden"> 孤雁儿 <span onclick=shoppingcat();this.style.display='none' style="font:12;color:red;float:right;margin-top:-20">展开 </span><br><br> 世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br> 藤床纸帐朝眠起，<br> 说不尽、无佳思。<br> 沈香烟断玉炉寒，<br> 伴我情怀如水。<br> 笛声三弄，<br> 梅心惊破，<br> 多少春情意。<br><br> 小风疏雨萧萧地，<br> 又催下、千行泪。<br> 吹箫人去玉楼空，<br> 肠断与谁同倚？ 一枝折得，<br> 人间天上，<br> 没个人堪寄。 </div>
 提示：您可以先修改部分代码再运行

稍改一下

<style> #content { font-size: 14px; width: 200px; height: 50px; background: #eee; padding: 10px; border: 4px #ccc double; overflow: hidden; } #key { color: red; float: right; margin-top: -20px; } </style> <script> var s=5; var minheight=50; var maxheight=400; function shoppingcat(){ var key = document.getElementById("key").innerText; if(content.style.pixelHeight==0)content.style.pixelHeight=minheight; if(key=="展开"){ content.style.pixelHeight+=s; if(content.style.pixelHeight<maxheight){ setTimeout("shoppingcat();",1); }else{ document.getElementById("key").innerText="关闭"; } }else{ content.style.pixelHeight-=s; if(content.style.pixelHeight>minheight){ setTimeout("shoppingcat();",1); }else{ document.getElementById("key").innerText="展开"; } } } </script> <div id="content"> 孤雁儿 <span id="key" onclick="shoppingcat();">展开</span><br><br> 世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br> 藤床纸帐朝眠起，<br> 说不尽、无佳思。<br> 沈香烟断玉炉寒，<br> 伴我情怀如水。<br> 笛声三弄，<br> 梅心惊破，<br> 多少春情意。<br><br> 小风疏雨萧萧地，<br> 又催下、千行泪。<br> 吹箫人去玉楼空，<br> 肠断与谁同倚？ 一枝折得，<br> 人间天上，<br> 没个人堪寄。 </div>
 提示：您可以先修改部分代码再运行

现在不闪了

[ 本帖最后由 SenFe 于 2006-10-29 17:58 编辑 ]

SenFe你好啊！不错不错，我js学得不好哦,所以只敢写写基本的东东,创意一大把却不知道怎么实现...

<style> #content { font-size: 14px; width: 200px; height: 50px; background: #eee; padding: 10px; border: 4px #ccc double; overflow: hidden; } </style> <script> var s=5; var minheight=50; var maxheight=400; function shoppingcat(){ if(content.style.pixelHeight<maxheight) {content.style.pixelHeight+=s;} else{setTimeout("shoppingcat();",0);} } function shoppingcata(){ if(content.style.pixelHeight>minheight) {content.style.pixelHeight-=s;} else{setTimeout("shoppingcata();",0);} } </script> <div id="content" onmouseover="shoppingcat();" onmouseout="shoppingcata();" > 孤雁儿 <br><br> 世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br> 藤床纸帐朝眠起，<br> 说不尽、无佳思。<br> 沈香烟断玉炉寒，<br> 伴我情怀如水。<br> 笛声三弄，<br> 梅心惊破，<br> 多少春情意。<br><br> 小风疏雨萧萧地，<br> 又催下、千行泪。<br> 吹箫人去玉楼空，<br> 肠断与谁同倚？ 一枝折得，<br> 人间天上，<br> 没个人堪寄。 </div>
 提示：您可以先修改部分代码再运行

我这样写怎么不能实现一直展开

引用:

原帖由 mlboy 于 2006-10-8 22:15 发表
<style>
#content {
       font-size: 14px;
       width: 200px;
       height: 50px;
       background: #eee;
       padding: 10px;
       border: 4px #ccc double;
       overflow: hidden;
}

</style>
<script> ...

你的思路有问题，不该用else那个

<style> #content { font-size: 14px; width: 200px; height: 50px; background: #eee; padding: 10px; border: 4px #ccc double; overflow: hidden; } </style> <script> var s=5; var minheight=50; var maxheight=400; function shoppingcat(){ if(content.style.pixelHeight<maxheight) {content.style.pixelHeight+=s; setTimeout("shoppingcat()",0);} } function shoppingcata(){ if(content.style.pixelHeight>minheight) {content.style.pixelHeight-=s; setTimeout("shoppingcata()",0);} } </script> <div id="content" onmouseover="shoppingcat();" onmouseout="shoppingcata();" > 孤雁儿 <br><br> 世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br> 藤床纸帐朝眠起，<br> 说不尽、无佳思。<br> 沈香烟断玉炉寒，<br> 伴我情怀如水。<br> 笛声三弄，<br> 梅心惊破，<br> 多少春情意。<br><br> 小风疏雨萧萧地，<br> 又催下、千行泪。<br> 吹箫人去玉楼空，<br> 肠断与谁同倚？ 一枝折得，<br> 人间天上，<br> 没个人堪寄。 </div>
 提示：您可以先修改部分代码再运行

小效果还有这么多朋友讨论，兴会！

<style> #content { font-size: 14px; width: 200px; height: 50px; background: #eee; padding: 10px; border: 4px #ccc double; overflow: hidden; } #key { color: red; float: right; margin-top:-15px; border:1px #ccc solid; padding:5px; cursor:hand; } </style> <script> var s=5; var minheight=50; var maxheight=350; function shoppingcat(){ var key = document.getElementById("key").innerText; if(key=="展开"){ content.style.pixelHeight+=s; if(content.style.pixelHeight<maxheight){ setTimeout("shoppingcat();",1); }else{ document.getElementById("key").innerText="关闭"; } }else{ content.style.pixelHeight-=s; if(content.style.pixelHeight>minheight){ setTimeout("shoppingcat();",1); }else{ document.getElementById("key").innerText="展开"; } } } </script> <div id="content"> 孤雁儿 <span id="key" onclick="shoppingcat();">展开</span><br><br> 世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br> 藤床纸帐朝眠起，<br> 说不尽、无佳思。<br> 沈香烟断玉炉寒，<br> 伴我情怀如水。<br> 笛声三弄，<br> 梅心惊破，<br> 多少春情意。<br><br> 小风疏雨萧萧地，<br> 又催下、千行泪。<br> 吹箫人去玉楼空，<br> 肠断与谁同倚？ 一枝折得，<br> 人间天上，<br> 没个人堪寄。 </div>
 提示：您可以先修改部分代码再运行

好帅，收藏了。多谢。。。呵呵

<style> #content,#intro{ font: 13px/25px; width: 200px; height: 40px; background: #eee; padding: 10px; border: 4px #ccc double; border-bottom:0; overflow: hidden; } #intro { color: #036; font:12px; border: 4px #ccc double; border-top:0; height:70px; } #key{color:#900;float:right} hr{height:1px;border:1px #ccc dotted} </style> <script> var s=5; var minheight=40; var maxheight=500; function shoppingcat(){ var key = document.getElementById("key").innerText; if(key=="展开"){ content.style.pixelHeight+=s; if(content.style.pixelHeight<maxheight){ setTimeout("shoppingcat();",1); }else{ document.getElementById("key").innerText="关闭"; } }else{ content.style.pixelHeight-=s; if(content.style.pixelHeight>minheight){ setTimeout("shoppingcat();",1); }else{ document.getElementById("key").innerText="展开"; } } } </script> <div id="content"> 孤雁儿 <br><br> 世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br> 藤床纸帐朝眠起，<br> 说不尽、无佳思。<br> 沈香烟断玉炉寒，<br> 伴我情怀如水。<br> 笛声三弄，<br> 梅心惊破，<br> 多少春情意。<br><br> 小风疏雨萧萧地，<br> 又催下、千行泪。<br> 吹箫人去玉楼空，<br> 肠断与谁同倚？ 一枝折得，<br> 人间天上，<br> 没个人堪寄。 </div> <div id="intro" ><hr>作者：李清照<span id="key" onclick="shoppingcat();">展开</span><br>来源 ：中国诗辞网</div>
 提示：您可以先修改部分代码再运行

好效果,如果能让FF也有效就好了

都是强人,收藏!

　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 　<html> 　<head> 　<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 　<title>menu hide show</title> 　<script language="JavaScript"> 　maxh=0; 　function hidde(obj) 　{ 　if (maxh==0) 　maxh=obj.style.pixelHeight; 　if(obj.style.pixelHeight>0) 　 { 　 obj.style.pixelHeight-=10; 　 obj.filters.alpha.opacity-=4; 　 if(obj.style.pixelHeight==maxh/10) 　 obj.style.display='none'; 　 obj1=obj 　 setTimeout('hidde(obj1)','1'); 　 } 　} 　function show(obj) 　{ 　if(obj.style.pixelHeight<maxh) 　 { 　 obj.style.display=''; 　 obj.style.pixelHeight+=10; 　 obj.filters.alpha.opacity+=4; 　 obj1=obj 　 setTimeout('show(obj1)','1'); 　 } 　} 　function turn(obj) 　{ 　if (obj.style.display=='none') 　show(obj); 　else 　hidde(obj); 　} 　</script> 　</head> 　 　<body> 　<input type="button" name="Submit" value="hidde" onClick="hidde(table1)"> 　<input type="button" name="Submit" value="show" onClick="show(table1)"> 　<input type="button" name="Submit" value="turn" onClick="turn(table1)"> 　<div id="table1" style="height:200px;FILTER: alpha(Opacity=100);OVERFLOW: hidden;"> 　 <table width="100%" height="200" border="0" cellpadding="0" cellspacing="0" bgcolor="#42CC33" > 　 <tr> 　 <td>this is something<br> 　 br<br> 　 br<br> 　 br<br> 　 br<br> 　 br </td> 　 </tr> 　</table> 　</div><br> 　this is the foot 　</body> 　</html> 　
 提示：您可以先修改部分代码再运行

引用:

原帖由 SenFe 于 2006-10-8 23:23 发表

你的思路有问题，不该用else那个
<style>
#content {
       font-size: 14px;
       width: 200px;
       height: 50px;
       background: #eee;
       padding: 10px;
       border: 4px #ccc double;
       overflow: hidden;
...

我现有问题,要是中间就离开就会跳一下跳一下,不知道应该怎么解决

厉害！！收藏，学习·

有展开字样的效果
第一次点展开也页面被刷新了一下
怎么让他不刷新呢？

看见牛人了啊

引用:

原帖由 xiaolabi 于 2006-10-29 14:23 发表
有展开字样的效果
第一次点展开也页面被刷新了一下
怎么让他不刷新呢？

引用:

原帖由 Riubio 于 2006-10-29 17:43 发表
看见牛人了啊

二楼的现在不闪了

引用:

原帖由 shoppingcat 于 2006-10-8 20:32 发表
<script>
//滑动层
function shoppingcat()
{
if(content.style.pixelHeight<500)
{
//content.style.pixelLeft-=5
content.style.pixelHeight+=5
setTimeout('shoppingcat()',1)
}
}
< ...

好象不是这种，我想做那种鼠标移上去自动展开，鼠标移走自动收起的效果

引用:

原帖由 zhaoliancheng 于 2006-12-25 23:09 发表

好象不是这种，我想做那种鼠标移上去自动展开，鼠标移走自动收起的效果

哦，不好意思，这个发错了

再FF下面没有效果啊.

  好效果 I LIKE THIS !
js博大精深呢。

呵呵，这个功能不错，很多网站有这个功能的，收藏了先

这个东西好，顶个

都是人才啊！小弟都收藏了！好好学！

呵呵，收藏了。

有个问题就是鼠标快速滑入和滑出，那个层没有到达底部里就是半截的。
继续努力吧。

wow wow   高手啊。   收藏咯！

正好用上

厉害，学习了！

确实越改越好了。支持。好效果