上一篇 |

程序设计

滑动折叠效果,值得收藏.

作者:小戒日期:2007-01-03

字体大小: 小中大

滑动折叠效果一

HTML代码

<base href="http://pages.blueidea.com/articleimg/2005/05/">
<style>
body{
	background-color:#fff;
	text-align:center;
	}
.btn{
	display:inline;
	overflow:hidden;
	border-style:solid;
	border-width:0px;
	border-color:#eec9 #eec9 #6e6e56 #6e6e56;
	padding:   ;
	width:00px;
	height:00px;
	}
.btn_txt{
	position:relative;
	}
.btn_txt div{
	height:00px;
	padding-top:0px;
	font-size:9px;
	font-family:small fonts;
	color:Deeppink;
	text-align:center;
	cursor:hand;
	}
.btn_mask{
	background-color:Deeppink;
	position:relative;
	width:00%;
	height:00%;
	}
</style>
<body>
<script>
function cr�ateButton(parentOb,innerHtml,innerHtml2,clsName,maskColor){
	//parentOb,按钮容器
	//innerHtml,innerHtml2,正常状态和鼠标经过时按钮显示的内容
	//clsName,按钮样式，一套四部分，参见本例的样式定义
	//maskColor，指定不同于样式clsName_mask的背景颜色，可选
	//暂支持IE5.5及更高版本————本以为IE5.0该也支持的，但是那浏览器本身实在漏洞百出，怪我不得
	//对IE以外的浏览器clsName的display为会强制为block（这是标准，inline时指定尺寸会失效，除了IE谁都遵守)
	//支持opera8.0
	//在Firefox.0.3和netScape8.0中，运行后会总有一个按钮会保持为鼠标移入时的状态
	//别的浏览器我没有，谁有兴趣可以帮忙试试
	//mozart0,2005.06.7
	var fbtn=document.cr�ateElement('DIV');
	var fbtn_mask=document.cr�ateElement('DIV');
	var fbtn_txt=document.cr�ateElement('DIV');
	fbtn.className=clsName;
	fbtn_mask.className=clsName+'_mask';
	fbtn_txt.className=clsName+'_txt';
	fbtn_txt.innerHTML='<div>'+innerHtml+'</div><div>'+innerHtml2+'</div>';
	parentOb.appendChild(fbtn);
	fbtn.appendChild(fbtn_mask);
	fbtn.appendChild(fbtn_txt);
	if(!/myie2/i.test(navigator.userAgent))
		fbtn.style.display='block';
	fbtn.width=fbtn.clientWidth;
	fbtn.height=fbtn.clientHeight;
	if(maskColor)
		fbtn_mask.style.backgroundColor=maskColor;
	if(!cr�ateButton.Btn){
		cr�ateButton.Btn=[fbtn];
		cr�ateButton.Btn_mask=[fbtn_mask];
		cr�ateButton.Btn_txt=[fbtn_txt];
		fbtn.index=0;
		}
	else{
		fbtn.index=cr�ateButton.Btn.length;
		cr�ateButton.Btn.push(fbtn);
		cr�ateButton.Btn_mask.push(fbtn_mask);
		cr�ateButton.Btn_txt.push(fbtn_txt);
		}
	fbtn_txt.style.top=-*fbtn.height+'px';
	fbtn_mask.style.top=-*fbtn.height+'px';
	fbtn.onmouseover=function(){
		if(!cr�ateButton.current){
			cr�ateButton.current=this;
			domove(this.index);
			}
		else if(cr�ateButton.current!=this){
			domove(cr�ateButton.current.index);
			domove(this.index);
			cr�ateButton.current=this;
			}
		}
	fbtn.onmouseout=function(){
		if(window.event&&event.toElement==parentOb&&cr�ateButton.current==this){
			//此处为FF和NS中的BUG源:window.event为undefined
			//我在FF中仅找到过一类情况下event勉强是个东西（Object）:<body onclick='alert(event)'></body>
			//谁知道此处怎么解决或者有相关资料，望不吝赐教
			domove(this.index);
			cr�ateButton.current=null;
			}
		}
	if(window.domove)
		return;
	window.domove=function(num){
		var o=cr�ateButton.Btn[num];
		var t=cr�ateButton.Btn_txt[num];
		var m=cr�ateButton.Btn_mask[num];
		if(t.style.top.replace('px','')<-2*o.height){
			t.style.display="none";
			var temp=t.childNodes[0].innerHTML;
			t.childNodes[0].innerHTML=t.childNodes[].innerHTML;
			t.childNodes[].innerHTML=temp;
			t.style.top=-*o.height+'px';
			t.style.display="block";
			if(m.style.top.replace('px','')>o.height)
				m.style.top=-*o.height+'px';
			else
				m.style.top='0px';
			}
		else{
			m.style.top=(parseInt(m.style.top.replace('px',''))+3)+'px';
			t.style.top=(parseInt(t.style.top.replace('px',''))-3)+'px';
			setTimeout('domove('+num+')',0);
			}
		}
	}
cr�ateButton(document.body,'<br><br><br>Button ','<img src=034/preview_s0.jpg>','btn');
cr�ateButton(document.body,'<br><br><br>Button 2','<img src=029/preview_s0.jpg>','btn','limegreen');
cr�ateButton(document.body,'<br><br><br>Button 3','<img src=027/preview_s0.jpg>','btn','orange');
cr�ateButton(document.body,'<br><br><br>Button 4','<img src=022/preview_s0.jpg>','btn','mediumslateblue');
cr�ateButton(document.body,'<br><br><br>Button 5','<img src=05/preview_s0.jpg>','btn','red');
</script>

<div id="myLightObject" style="position: relative; height: 400px; width: 400px; top: 0px; left: 0px; color: White; filter: light">
<center>
黑夜给了我一双眼睛,<br>
而我却用它来寻找光明,<br>
园林晴昼春谁主<br>
暖律潜催，幽谷暄和，黄鹂翩翩，乍迁芳树
<p>
春花秋月何时了，往事知多少<br>
小楼昨夜又东风<br>
故国不堪回首月明中。<br>
雕栏玉砌应犹在，只是朱颜改。
</p>
<p>
问君能有几多愁，<br>
恰似一江春水向东流。<br>
CSS滤镜与VBScript结合运用的效果<br>
利用CSS的Light滤镜模拟移动的光锥<br>
</p>
用VBScript捕捉鼠标的移动,令光锥射向也跟着移动
</center> 	
</div>
<script language="VBScript">
Option Explicit
sub window_OnLoad()
    call myLightObject.filters.light(0).addambient(0,0,255,30)
	call myLightObject.filters.light(0).addcone(400,400,200,00,00,200,204,200,80,0)
end sub
sub document_onMouseMove()
    call myLightObject.filters.light(0).MoveLight(,window.event.x,window.event.y,0,)
end sub	
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

滑动折叠效果二

HTML代码

小风疏雨萧萧地，<br>
又催下、千行泪。<br>
吹箫人去玉楼空，<br> 
肠断与谁同倚？
一枝折得，<br>
人间天上，<br>
没个人堪寄。
</div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

滑动折叠效果三

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

滑动折叠效果四

HTML代码

小风疏雨萧萧地，<br>
又催下、千行泪。<br>
吹箫人去玉楼空，<br> 
肠断与谁同倚？
一枝折得，<br>
人间天上，<br>
没个人堪寄。
</div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

滑动折叠效果五

HTML代码

#intro {
	color: #036;
	font:2px;
        border: 4px #ccc double;
        border-top:0;
        height:70px;
}
#key{color:#900;float:right}
hr{height:px;border:px #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();",);
		}else{
			document.getElementById("key").innerText="关闭";
		}
	}else{
		content.style.pixelHeight-=s;
		if(content.style.pixelHeight>minheight){
			setTimeout("shoppingcat();",);
		}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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

滑动折叠效果六

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[本日志由小戒于 2007-01-03 00:43 AM 编辑]
收藏到QQ书签

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: 滑动折叠效果收藏

评论: 0 | 引用: 65 | 查看次数: -

发表评论

昵　称:
密　码:	游客发言不需要密码.
邮　箱:	博主回复后，系统将发送通知邮件到您的邮箱，可不填.
网　址:
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.

滑动折叠效果,值得收藏.

作者:小戒 日期:2007-01-03

作者:小戒日期:2007-01-03