打印

javascript实现弹性效果

tension

管理员

Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2007-5-28 19:26 只看该作者

javascript实现弹性效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta

http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档

</title>
<style type="text/<span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>">
<!--
#hor1 {
	position:absolute;

left:320px;
	top:20px;
	width:220px;
	height:20px;
	z-

index:1;
	background-color: #999900;
}
#hor2 {
	position:absolute;

left:320px;
	top:40px;
	width:220px;
	height:20px;
	z-

index:2;
	background-color: #FFCC00;
}
#hor3 {
	position:absolute;

left:320px;
	top:60px;
	width:220px;
	height:20px;
	z-

index:3;
	background-color: #99CC00;
}
#board1 {

position:absolute;
	left:320px;
	top:40px;
	width:220px;

height:120px;
	z-index:-100;
	background-color: #333333;

visibility: hidden;
}
body,td,th {
	font-family: Verdana, Arial, Helvetica,

sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
}

body {
	background-color: #666666;
}
#board2 {

position:absolute;
	left:320px;
	top:60px;
	width:220px;

height:120px;
	z-index:-90;
	background-color: #333333;

visibility: hidden;
}
#board3 {
	position:absolute;
	width:220px;

height:120px;
	z-index:-80;
	left: 320px;
	top: 80px;

background-color: #333333;
	visibility: hidden;
}
#hor4 {

position:absolute;
	left:320px;
	top:80px;
	width:220px;

height:20px;
	z-index:4;
	background-color: #99CCCC;
}
#board4 {

position:absolute;
	left:320px;
	top:100px;
	width:220px;

height:120px;
	z-index:-70;
	background-color: #333333;

visibility: hidden;
}

-->
</style>
<script

type="text/javascript">
lastNo=0
function re(menu_no){
if(lastNo!=menu_no)

{
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}

document.getElementById("board"+menu_no).style.visibility="visible"
}
function

rest(){
for(i=1;i<=4;i++){
document.getElementById

("hor"+i).style.top=20*i;
document.getElementById

("board"+i).style.visibility="hidden"
}
menu_num=4;
 act=1
 height=120+20

speed=0;
 posY=0;
}
function huke(){
if(act==1&&cur<100){
speed=(height-

posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++)

{
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-

posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById

("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}

}

</script>
</head>
<body>
<div id="hor1" onclick="re(1);huke

()">News</div>
<div id="hor2" onclick="re(2);huke()">Populor</div>
<div id="hor3"

onclick="re(3);huke()">Sports</div>
<div id="hor4" onclick="re(4);huke

()">Woman</div>
<div id="board1">1.由AS而想起Javascript<br />2.用Jscript写<span href="tag.php?name=ASP" onclick="tagshow(event)" class="t_tag">ASP</span>有没有先天

性的不足？<br />3.没有了。</div>
<div id="board2">1.xhtml+<span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>真的来了吗？<br />2.Flash

取代传统<span href="tag.php?name=%E7%BD%91%E7%AB%99" onclick="tagshow(event)" class="t_tag">网站</span><br />3.Flash何时才能连接数据库？</div>
<div id="board3">1.程序员与小姐的10

个相同。<br />2.中国的程序员与中国的足球？</div>
<div id="board4">1.男人的一半是女人—

—张贤亮。<br />
2.当代女人的男性化与男人的女性化。</div>
</body>
</html>

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

TOP

keysarjan

新手上路

Rank: 1

2^# 大中小发表于 2007-6-19 22:29 只看该作者

去掉振动，我觉得比较好一些。

TOP

DeadFire

新手上路

Rank: 1

3^# 大中小发表于 2007-7-10 08:47 只看该作者

弹的不错，而且支持opera。看看有啥机会用没以后。怎么发这个区了，应该发js区

[ 本帖最后由 DeadFire 于 2007-7-10 08:49 编辑 ]

TOP

那些花儿

新手上路

Rank: 1

4^# 大中小发表于 2007-7-15 02:19 只看该作者

来回一个。。支持。。。

TOP

393张高清晰web2.0站点截图	425款精品毛笔墨迹+38款墨迹底纹..	10位Master级别的Photoshop高手	绝对漂亮的笔刷
Soul 近期新作品欣赏..	熟女养成日志—长草	魔幻抽象/吸血鬼传说！！	photoshop仿CG滤镜