打印

flash还有何用？javascript实现弹性效果

wysun369 [楼主]

银牌会员

帖子: 773
体力: 1532
威望: 3

1^# 大中小发表于 2005-11-11 23:02

不知道用FLASH，AS实现的效果，用js是不是也可以呢？
点击绿色层。

<!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/css">

</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写ASP有没有先天性的不足？<br />3.没有了。</div>
<div id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</div>
<div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</div>
<div id="board4">1.男人的一半是女人——张贤亮。<br />
2.当代女人的男性化与男人的女性化。</div>
</body>
</html>

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

本帖最近评分记录

经典论坛大妈威望 +1 历史打分 2005-11-11 23:02

TOP

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

Sheneyan

子虚乌有

超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门
离线: 27 天

专长 JS,JAVA,Oracle

2^# 大中小发表于 2005-11-12 00:19

呵呵，flash是真正跨平台的，js目前似乎还没法做到这个吧？

我说的跨平台是指包括pda这种平台。

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

美橙vps独立IP月付189元

liuquan1981

初级会员

帖子: 13
体力: 51
威望: 0
离线: 430 天

3^# 大中小发表于 2005-11-12 09:48

一个挺有意思的东东啊，收藏了，谢谢楼主。

TOP

中央美院远程平面设计进修班

wangruishan

初级会员

帖子: 101
体力: 184
威望: 2
离线: 144 天

4^# 大中小发表于 2005-11-16 17:23

不错的脚本呀，收藏了

我希望有一天我能用鼠标双击我的钱包，然后选中一张100元，按住“ctrl-c”接着不停的“ctrl-v”。[

TOP

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

Sheneyan

子虚乌有

超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门
离线: 27 天

专长 JS,JAVA,Oracle

5^# 大中小发表于 2005-11-16 20:11

嗯，比上次的好看

不过，黑色的div还看起来不是很好，当其它对象掉下去的时候，能够看见黑色div的下边界。稍微修改如下：

<!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/css">

</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
var b=document.getElementById("board"+(cur-1))
b.style.height=posY-b.style.top-(cur-3)*20
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写ASP有没有先天性的不足？<br />3.没有了。</div>
<div id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</div>
<div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</div>
<div id="board4">1.男人的一半是女人——张贤亮。<br />
2.当代女人的男性化与男人的女性化。</div>
</body>
</html>

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

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

eshsdesign

新手上路

帖子: 10
体力: 28
威望: 0
离线: 1049 天

6^# 大中小发表于 2005-11-16 22:23

都有其特点，看个人的习惯，本人觉得FLASH的功能强大得多

love is reall!~

TOP

forestgan

银牌会员

帖子: 1123
体力: 2655
威望: 37
离线: 505 天

7^# 大中小发表于 2005-11-16 22:36

效果是不错，但在firefox中无效果，所以flash是不能被轻易所替代的。

I follow W3C Web Content Accessibility Guidelines.
Fifty Studio　　

TOP

Sheneyan

子虚乌有

超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门
离线: 27 天

专长 JS,JAVA,Oracle

8^# 大中小发表于 2005-11-17 02:41

嗯。。。那个代码我倒是没有在ff底下测试过，测试后果然不行！

我重构了一段代码，核心的内容还是楼主的那段huke（虽然改了，不过核心还是一样

），但是其他部分全部重新写了一下，现在增加新的菜单项简单很多，只要修改htm内容即可，不需要修改css和js（不过js中那些颜色可能要增加一点），而且已经支持ie，ff，opera了

代码如下：

<!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" />
<meta name="author" content="sheneyan">
<title>无标题文档</title>
<style type="text/css">

</style>
<script type="text/javascript">
var TITLE_BGCOLORS = "#F00,#0F0,#0FF,#00F,#F0F,#800000,#808000,#008000,#008080,#000080".split(",")//标题的颜色
var isIE=document.all?true:false;//是否是ie
var syy_menu=null;//菜单对象
var cur_obj=null;//当前晃动的对象
var act=0;//当前是否动作
var posY=0;//当前动作的高度
var speed=0;//每次变化的速度
var height=0;//晃动对象的变化高度
function initMenu(){//初始化函数
  //菜单的标识就是那个syy_menu
  syy_menu=document.getElementById("syy_menu")
  if (syy_menu==null)return;
  
  //取得所有的标题，我这里的标题是h3,
  var titles=syy_menu.getElementsByTagName("h3");
  for (var i=0,t,t0 = "",t1 = ",";t=titles[i];i++){
    //随机设置标题颜色
    while (t1.indexOf(","+(t0=Math.ceil(Math.random()*TITLE_BGCOLORS.length))+",")>=0);
    t1+=t0+","
    t.style.backgroundColor = TITLE_BGCOLORS[t0]
    //标题单击的时候触发事件 
    t.onclick = function(){
      //取得所有的内容
      var uls=syy_menu.getElementsByTagName("ul");
      //取得这个标题的内容（也就是下一个ul）
      var o=nextNode(this);
      //保存原始高度，我不知道为什么每次弹出菜单，高度都会增加。。只好保存一下了
      if (!o.orignHeight)o.orignHeight=o.clientHeight;//保存最原始的高度
      //循环内容数组，将不是当前的内容的东东移动到屏幕外
      for (var i=0,ul;ul=uls[i];i++){
        if (ul!=o)
          ul.style.position = "absolute";
      }
      //设置当前对象供后面函数调用
      cur_obj=o;
      //目标高度
      height=parseInt(o.orignHeight);
      //设置对象的当前高度为0
      o.style.height = "0px";
      //将对象从屏幕外移动回来
      o.style.position = "static";
      //可以动作了
      act=1;
      //初始速度为0
      speed=0;
      //初始高度为0
      posY=0;
      //我开始晃～
      huke()
    }
  }
}
//晃啊晃啊晃～
function huke(){
  if(act==1){
    speed=(height-posY)*0.69+speed*0.6;
    posY+=speed;
    cur_obj.style.height=posY+"px"
    if(Math.abs(height-posY)<0.5){
      act=0;
      cur_obj.style.height=height+"px";
    }
    setTimeout(huke,50)
  }
}
//取得下一个元素,
function nextNode(o){
  var t=o;
  do{
    t=t.nextSibling;
  }while (t.nodeType==3);
  return t;
}
if (isIE)
  window.attachEvent("onload",initMenu);
else
  window.addEventListener("load",initMenu,false);
</script>
</head>
<body>
<div id="syy_menu">
  <h3>News</h3>
  <ul>
    <li>1.由AS而想起Javascript</li>
    <li>2.用Jscript写ASP有没有先天性的不足？</li>
    <li>3.没有了。</li>
  </ul>
  <h3>Populor</h3>
  <ul>
    <li>1.xhtml+css真的来了吗？</li>
    <li>2.Flash取代传统网站</li>
    <li>3.Flash何时才能连接数据库？</li>
  </ul>
  <h3>Sports</h3>
  <ul>
    <li>1.程序员与小姐的10个相同。</li>
    <li>2.中国的程序员与中国的足球？</li>
  </ul>
  <h3>Woman</h3>
  <ul>
    <li>1.男人的一半是女人——张贤亮。</li>
    <li>2.当代女人的男性化与男人的女性化。</li>
    <li>3.超级女声现象。</li>
    <li>4.超级女声现象。</li>
    <li>5.超级女声现象。</li>
    <li>6.超级女声现象。</li>
    <li>7.超级女声现象。</li>
  </ul>
</div>
</body>
</html>

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

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

zbm2001z

宝儿

荣誉管理团队

帖子: 1526
体力: 3931
威望: 41
当前: 北京昌平区

专长 网页设计,Flash,JS

9^# 大中小发表于 2005-11-17 10:32

支持一个

我家宝儿：http://blog.sina.com.cn/u/1258716075

TOP

forestgan

银牌会员

帖子: 1123
体力: 2655
威望: 37
离线: 505 天

10^# 大中小发表于 2005-11-17 10:59

版主js水平高，佩服！

I follow W3C Web Content Accessibility Guidelines.
Fifty Studio　　

TOP

got

巴之闭

银牌会员

帖子: 763
体力: 2406
威望: 10
当前: 广东广州

11^# 大中小发表于 2005-11-17 11:43

用过flash吗？

just ok~~

TOP

landyking

初级会员

帖子: 27
体力: 108
威望: 0
离线: 1038 天

12^# 大中小发表于 2005-11-27 08:46

斑竹水平就是还不错了。。。

TOP

ywidea

中级会员

帖子: 119
体力: 263
威望: 2
离线: 4 天

13^# 大中小发表于 2005-11-27 10:55

是呀，真的佩服！

YWIDEA

TOP

tomking741

初级会员

帖子: 36
体力: 126
威望: 0
离线: 72 天

14^# 大中小发表于 2005-12-22 09:05

这个不就是弹性菜单么，前几天不是有人发过了

TOP

abrush

妖怪

高级会员

帖子: 219
体力: 604
威望: 0
当前: 云南昆明
离线: 66 天

15^# 大中小发表于 2006-11-2 17:41

如果能隔一段时间自动转到下一个标签就好了

:) 广告位招租~

TOP

Civito

初级会员

帖子: 37
体力: 61
威望: 0
当前: 四川成都
离线: 21 天

16^# 大中小发表于 2007-1-8 15:57

恶心的贴子标题。

怀才就像怀孕...

TOP

风动人

中级会员

帖子: 170
体力: 443
威望: 3
离线: 554 天

17^# 大中小发表于 2007-1-8 16:01

引用:

原帖由 Sheneyan 于 2005-11-12 00:19 发表
呵呵，flash是真正跨平台的，js目前似乎还没法做到这个吧？

我说的跨平台是指包括pda这种平台。

同意，不过先学的是javascript，到目前为止还是不会flash……

Go: http://hily.iyi.cn/

TOP

lichao

新手上路

帖子: 4
体力: 10
威望: 0
离线: 607 天

18^# 大中小发表于 2007-1-8 16:20

哈哈

谢谢了！！

TOP

smartkit

新手上路

帖子: 11
体力: 22
威望: 0
当前: 北京海淀区
离线: 125 天

19^# 大中小发表于 2007-1-23 15:12

强烈鄙视!

freehere

TOP

coal

初级会员

帖子: 37
体力: 51
威望: 0
离线: 307 天

20^# 大中小发表于 2007-1-23 15:24

要是还能回到最初的状态就牛了

TOP

wly9908

初级会员

帖子: 22
体力: 69
威望: 0
离线: 404 天

21^# 大中小发表于 2007-1-23 15:41

收藏了，效果不错
不过，个人Javascript永远取代不了Flash

TOP

tianbian00

中级会员

帖子: 125
体力: 207
威望: 1
当前: 广西南宁
离线: 17 天

22^# 大中小发表于 2007-5-25 10:29

N年前才用FLASH搞这种，现在FLASH都搞视频了，Javascript才搞这过时的东西

TOP

pippo831214

夏至雨

银牌会员

帖子: 809
体力: 1144
威望: 0
离线: 2 天

专长 前端制作,ASP,网络

23^# 大中小发表于 2007-5-25 14:39

哪位高人能把它改成横向的啊？

TOP

vipbaidu

高级会员

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

24^# 大中小发表于 2007-5-29 15:40

都有其特点，看个人的习惯

网站建设

TOP

ljg998

新手上路

帖子: 10
体力: 5
威望: 0
离线: 6 天

25^# 大中小发表于 2007-6-22 14:24

不知所谓！

TOP

zman

新手上路

帖子: 8
体力: 12
威望: 0
离线: 26 天

26^# 大中小发表于 2007-6-22 19:27

标题欠骂～

flash 还有何用，自己到flash专区去搜索下

虽然这段脚本写的还不错，注释清晰，机构工整

TOP

joymv

貌似没几年青春

中级会员

帖子: 285
体力: 457
威望: 0
当前: 江西南昌

专长 网页设计,PHP

27^# 大中小发表于 2007-6-22 19:48

牛....不过,FLASH可不只有这点功能.
别太狂了..

TOP

Idoit

猩猩点灯

高级会员

帖子: 1005
体力: 739
威望: 22
当前: 江苏南京

28^# 大中小发表于 2007-6-22 19:49

FLASH做这个甚至都不需要懂编程，只有有耐心，时间轴上也能整出来。
FLASH能画个小人跳舞，能做个像足了传统动画的MV。
FLASH能播放视频，所以有了youtobe的神话。
FLASH能整合声音，图像，做个完完全全的视频会议系统。
FLASH能彻彻底底的跨平台，只要你愿意，你可以把FLASH搬到你的手机上放。
RIA这个词是FLASH东家发明出来的。
FLASH做的网络游戏现在已经很多了。

JS能做到几点？

TOP

udbyygy

心肠大大滴好

荣誉管理团队

帖子: 1222
体力: 2079
威望: 4
当前: 北京丰台区
离线: 102 天

专长 C/C++

29^# 大中小发表于 2007-6-22 19:51

FLASH运行没JAVASCRITP快，能用JAVASCRIPT代替的还是用JAVASCRIPT好了
全部用FLASH和全部用JAVASCRIPT差距太大了，这就是大网站用JAVASCRIPT，小网站用FLASH原因

[ 本帖最后由 udbyygy 于 2007-6-22 19:53 编辑 ]

TOP

changyucun

高级会员

帖子: 384
体力: 798
威望: 1
当前: 广东深圳
离线: 20 天

30^# 大中小发表于 2007-6-22 20:23

顶一个

顶顶顶顶顶，顶起来

[ 本帖最后由 changyucun 于 2007-6-22 20:24 编辑 ]

TOP