打印

一个简单的效果，看你怎么利用了

jxltabc

禁止发言

帖子: 3
体力: 6
威望: 0
离线: 599 天

31^# 大中小发表于 2007-1-9 18:00

好

太厉害，学习了！

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

lcc1969

新手上路

帖子: 6
体力: 9
威望: 0
离线: 291 天

32^# 大中小发表于 2007-1-16 10:51

如果在网页中调用两个或两个以上这样的效果，应该如何做呢？

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

yzcheng20

初级会员

帖子: 31
体力: 57
威望: 0
当前: 北京海淀区
离线: 70 天

33^# 大中小发表于 2007-1-18 16:32

回复 #2 SenFe 的帖子

不闪的才是健康的,支持二楼

www.yanghome.com.cn

TOP

请大家尊重和保护奥运知识产权。

Singerlsf

中级会员

帖子: 118
体力: 260
威望: 0

34^# 大中小发表于 2007-1-22 09:33

在fox下不支持啊！哥们

在fox下，点了没用啊！

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

youngzp

萼片

高级会员

帖子: 260
体力: 536
威望: 0
离线: 3 天

35^# 大中小发表于 2007-1-22 10:33

引用:

原帖由 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;
...

請問下如果是向右展開應該如何實現呢?

死党一族 · 我的死党 - 秀我的

TOP

kongkong11

空空要要

中级会员

帖子: 241
体力: 203
威望: 0
当前: 四川成都

36^# 大中小发表于 2007-1-30 09:18

怎么都会做哦？

TOP

yamajia

新手上路

帖子: 19
体力: 39
威望: 0

37^# 大中小发表于 2007-2-2 17:18

好厉害，学习ing.....

TOP

zhanjl

新手上路

帖子: 18
体力: 37
威望: 0
离线: 177 天

38^# 大中小发表于 2007-2-3 11:49

收藏，学习·

TOP

272

佛剑分说

中级会员

帖子: 187
体力: 360
威望: 0
离线: 136 天

39^# 大中小发表于 2007-5-29 22:45

如果结合一下层的交换可能更帅气

学无止境

TOP

iou33449999

金牌会员

帖子: 1061
体力: 3156
威望: 0
当前: 陕西西安

专长 网页设计,ASP,Access

40^# 大中小发表于 2007-5-30 02:43

这个想了好久好久撒嘎嘎

TOP

ch274657

过程

高级会员

帖子: 465
体力: 759
威望: 0
离线: 28 天

41^# 大中小发表于 2007-5-30 02:57

支持两个以上的修改
===================

提示：您可以先修改部分代码再运行

TOP

lovelium

心飘逝

银牌会员

帖子: 1244
体力: 2145
威望: 11
当前: 广东深圳
离线: 1 天

专长 JS,C#,MSSQL

42^# 大中小发表于 2007-5-30 09:14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
var mh = 30;//最小高度
var step = 5;//每次变化的px量
var ms = 30;//每隔多久循环一次
function toggle(o){
  if (!o.tid)o.tid = "_" + Math.random() * 100;
  if (!window.toggler)window.toggler = {};
  if (!window.toggler[o.tid]){
    window.toggler[o.tid]={
      obj:o,
      maxHeight:o.offsetHeight,
      minHeight:mh,
      timer:null,
      action:1
    };
  }
  o.style.height = o.offsetHeight + "px";
  if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
  window.toggler[o.tid].action *= -1;
  window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );
}
function anim(id){
  var t = window.toggler[id];
  var o = window.toggler[id].obj;
  if (t.action < 0){
    if (o.offsetHeight <= t.minHeight){
      clearTimeout(t.timer);
      return;
    }
  }
  else{
    if (o.offsetHeight >= t.maxHeight){
      clearTimeout(t.timer);
      return;
    }
  }
  o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
  window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
}
</script>
<style type="text/css">
div.xx{border:solid 1px;overflow:hidden;}
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}
</style>
</head>
<body>
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<hr />
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

心飘逝 http://www.szrgb.net

TOP

272

佛剑分说

中级会员

帖子: 187
体力: 360
威望: 0
离线: 136 天

43^# 大中小发表于 2007-5-30 09:21

如果是这样呢，以前记的有人写了个多层的转换

再附带这样的展开效果，我去搜搜看

学无止境

TOP

272

佛剑分说

中级会员

帖子: 187
体力: 360
威望: 0
离线: 136 天

44^# 大中小发表于 2007-5-30 10:24

这个效果能不能放在<p></p> 之间?

学无止境

TOP

272

佛剑分说

中级会员

帖子: 187
体力: 360
威望: 0
离线: 136 天

45^# 大中小发表于 2007-5-30 10:26

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<style type="text/css">
#content1,#intro1{
	font: 13px/25px;
	width: 200px;
	height: 40px;
	background: #eee;
	padding: 10px;
	border: 4px #ccc double;
        border-bottom:0;
	overflow: hidden;
}
#intro1 {
	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>
<head>
<body>
	  <ul>
	    <li><a href="#">人们在江边纪念屈原洒粽子</a></li>
	    <li><a href="#">成都市政府领导为龙舟队加油</a></li>
	    <li><a href="#">老字号粽子店</a></li>
	  </ul>
	  <p>
	  <script>
        var s=5;
        var minheight=40;
        var maxheight=500;
        function shoppingcat(){
	    var key = document.getElementById("key").innerText;
	    if(key=="展开"){
		content1.style.pixelHeight+=s;
		if(content1.style.pixelHeight<maxheight){
			setTimeout("shoppingcat();",1);
		}else{
			document.getElementById("key").innerText="关闭";
		}
	    }else{
		content1.style.pixelHeight-=s;
		if(content1.style.pixelHeight>minheight){
			setTimeout("shoppingcat();",1);
		}else{
			document.getElementById("key").innerText="展开";
		}
	    }
        }
      </script>
	    <div id="content1"> 
            孤雁儿
            <li>
            世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。</li>
            <li>藤床纸帐朝眠起，</li>
            <li>说不尽、无佳思。</li>
            <li>沈香烟断玉炉寒，</li>
            
        </div>
        <div id="intro1" ><hr>作者：李清照<span id="key" onclick="shoppingcat();">展开</span><br>来源：中国诗辞网
		</div>
	  </p>
<body>
</html>

提示：您可以先修改部分代码再运行

没有效果，怎么回事？

[ 本帖最后由 272 于 2007-5-30 10:29 编辑 ]

学无止境

TOP

272

佛剑分说

中级会员

帖子: 187
体力: 360
威望: 0
离线: 136 天

46^# 大中小发表于 2007-5-30 10:30

我昏，又可以了，我改了content1 ~ T_T

学无止境

TOP

mycncom

有梦飞翔

初级会员

帖子: 52
体力: 66
威望: 0
离线: 3 天

47^# 大中小发表于 2007-6-1 10:02

留个脚印找了半天才找到

TOP

yufanmn

新手上路

帖子: 16
体力: 42
威望: 1

48^# 大中小发表于 2007-6-1 13:12

太好了，谢谢

TOP

King11

新手上路

帖子: 8
体力: 22
威望: 0
离线: 458 天

49^# 大中小发表于 2007-6-1 15:01

不错的效果，值得学习

TOP

wuleying

银子

版主

帖子: 11034
体力: 9452
威望: 19
当前: 北京朝阳区

专长 PHP,Perl,MySQL

50^# 大中小发表于 2007-6-1 15:05

FF不支持innerText

要用textContent

银子博客 QQ表情朝闻道.夕死可矣
经典站长QQ群：16719484

TOP

semirmyway

新手上路

帖子: 18
体力: 36
威望: 0
离线: 30 天

51^# 大中小发表于 2007-6-1 15:09

这个效果不错。。四楼的有问题。。

TOP

voodoo5

初级会员

帖子: 79
体力: 170
威望: 0
当前: 福建厦门
离线: 137 天

52^# 大中小发表于 2007-6-1 18:50

BUG：第一次点击时，下面层会跳到上层，才展开，之后就不会了！

TOP

lscn

拎着猫的耗子

高级会员

帖子: 345
体力: 645
威望: 0

53^# 大中小发表于 2007-6-3 14:15

不兼容FF.

看也白看。

TOP

ida77

高级会员

帖子: 202
体力: 513
威望: 0
离线: 70 天

54^# 大中小发表于 2007-6-5 10:40

TOP

zcfg

中级会员

帖子: 168
体力: 324
威望: 4

55^# 大中小发表于 2007-6-5 12:40

想法不错代码收了谢谢

TOP

wenxin1234114

新手上路

帖子: 14
体力: 33
威望: 0
离线: 185 天

56^# 大中小发表于 2007-6-5 13:12

你们太有才了！！！！！！！！！！！！！！！！

TOP

vipbaidu

高级会员

帖子: 263
体力: 511
威望: 0
离线: 190 天

57^# 大中小发表于 2007-6-5 13:23

效果不错！

网站建设

TOP

wuleying

银子

版主

帖子: 11034
体力: 9452
威望: 19
当前: 北京朝阳区

专长 PHP,Perl,MySQL

58^# 大中小发表于 2007-6-5 13:43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Sheneyan" />
<style type="text/css">
body {
	font-size:12px;margin:0;
}
#content,#intro1{
	width: 200px;
	height: 4px;
	background: #eee;
	padding: 10px;
	border: 4px #ccc double;
    border-bottom:0;
	overflow: hidden;
}
#intro1 {
	color: #036;
	font:12px;
	border: 4px #ccc double;
	border-top:0;
	height:40px;
}
#key{color:#900;float:right}
hr{height:1px;border:1px #ccc dotted}
</style>
<script>
var s=5;
var minheight=4;
var maxheight=200;
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="展开";
}
}
}
function divBlock_event_mousedown(e){
	var e, obj, temp;
  obj=document.getElementById("hehe");
  e=window.event?window.event:e;
  obj.startX=e.clientX-obj.offsetLeft;
  obj.startY=e.clientY-obj.offsetTop;
  
  document.onmousemove=document_event_mousemove;
  temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}
function document_event_mousemove(e){
  var e, obj;
  obj=document.getElementById("hehe");
  e=window.event?window.event:e;
  
  with(obj.style){
  	position="absolute";
  	left=e.clientX-obj.startX+"px";
  	top=e.clientY-obj.startY+"px";
  }
}
function document_event_mouseup(e){
	var temp;
	document.onmousemove="";
	temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
}
</script>
<head>
<body>
<div id="hehe" onmousedown="divBlock_event_mousedown(arguments[0]);">
<div id="content"> 
	孤雁儿
	<li>
	世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。</li>
	<li>藤床纸帐朝眠起，</li>
	<li>说不尽、无佳思。</li>
	<li>沈香烟断玉炉寒，</li>
	<li>藤床纸帐朝眠起，</li>
	<li>说不尽、无佳思。</li>
	<li>沈香烟断玉炉寒，</li>	
</div>
<div id="intro1" ><hr>作者：李清照<span id="key" onclick="shoppingcat();" style="cursor:pointer;">展开</span><br>来源：中国诗辞网
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

可以拖动了..only IE

[ 本帖最后由 wuleying 于 2007-6-5 14:20 编辑 ]

本帖最近评分记录

marvellous 威望 +1 谢谢分享 2007-6-5 17:33

银子博客 QQ表情朝闻道.夕死可矣
经典站长QQ群：16719484

TOP

sakyang

黑子

高级会员

帖子: 424
体力: 819
威望: 0
当前: 陕西西安

59^# 大中小发表于 2007-6-5 13:58

可惜不兼容

TOP

wuleying

银子

版主

帖子: 11034
体力: 9452
威望: 19
当前: 北京朝阳区

专长 PHP,Perl,MySQL

60^# 大中小发表于 2007-6-5 14:17

找到个兼容的

提示：您可以先修改部分代码再运行

innerText->innerHTML
pixelHeight FF也不支持

[ 本帖最后由 wuleying 于 2007-6-5 14:19 编辑 ]

银子博客 QQ表情朝闻道.夕死可矣
经典站长QQ群：16719484

TOP