收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 13002|回复: 20

用javascript来实现动画导航

[复制链接]
发表于 2007-11-27 11:12:00 | 显示全部楼层 |阅读模式
原理

小时候,总喜欢看动画片吧,动画片是怎样实现的呢?记得妈妈说是一张画一张画切换过去(啊?那一部葫芦兄弟要画多少副画啊? -_-! ),其实我们现在做的也是这样,用一个图片,这个图片里有很多个小图,来显示动画轨迹.按时间来移动图片,那图片不是会动了啊?(不知道,表达清楚了没…语文很重要啊!!)


准备

我们需要一张图片,一个大脑,一张会笑的脸(不笑效果就出不来了….)!!下面是我准备的图片(ps水平有限^_^)…

代码

我们看到上面的图片,想象下,它动起来是多么的优美啊…

css

  1. .Gnb_btn_div{
  2.         width:90px;
  3.         height:75px;
  4.         overflow:hidden;
  5.         display:block;
  6.         position:absolute;
  7. }  

  8. .Gnb_btn_img{
  9.         width:100%;
  10.         height:525px;
  11.         display:block;
  12.         overflow:hidden;
  13.         text-indent:-500px;
  14. }
  15. #gnb_btn_01 .Gnb_btn_img {
  16.         background-image:url(http://www.wler.cn/blog/img/friend.gif)
  17. }
复制代码

javascript

  1. <script type="text/javascript">
  2. // <![CDATA[
  3. function GNB(_7c){
  4.         //初始化一些参数
  5.         this.iImgNum=7;                        //小图片个数
  6.         this.iImgHeight=75;                //小图片高度
  7.         this.iOverSpeed=50;                //鼠标经过时候切换的时间
  8.         this.iOutSpeed=50;                //鼠标离开时候切换的时间
  9.         this.eventObj=_7c;                //取得图片对象  

  10.         this.MouseOverFlag=false;
  11.         this.imageIndex=0;
  12.         if(this.eventObj==null){return;}
  13.         this.eventObj.parentClass=this;this.eventAssign();
  14. }  

  15. GNB.prototype.eventAssign=function(){//注册事件
  16.         this.eventObj.onmouseover=this.menuMouseOver;
  17.         this.eventObj.onmouseout=this.menuMouseOut;
  18. };  

  19. GNB.prototype.menuMouseOver=function(){//鼠标经过
  20.         if(this.parentClass.MouseOverFlag!=false){return;}
  21.         this.parentClass.MouseOverFlag=true;
  22.         this.parentClass.clearTimeOut();
  23.         this.parentClass.menuMouseOverTimer();
  24. };  

  25. GNB.prototype.menuMouseOut=function(){//鼠标离开
  26.         this.parentClass.MouseOverFlag=false;
  27.         this.parentClass.clearTimeOut();
  28.         this.parentClass.menuMouseOutTimer();
  29. };  

  30. GNB.prototype.menuMouseOverTimer=function(){//经过图片位置递增
  31.         var _7d=this;
  32.         if(this.imageIndex>=this.iImgNum){return;}
  33.         this.eventObj.scrollTop=this.imageIndex*this.iImgHeight;
  34.         this.imageIndex++;
  35.         this.setTimerID=setTimeout(function(){_7d.menuMouseOverTimer();},this.iOverSpeed);
  36. };  

  37. GNB.prototype.menuMouseOutTimer=function(){////经过图片位置递减
  38.         var _7e=this;if(this.imageIndex<0){return;}
  39.         this.eventObj.scrollTop=this.imageIndex*this.iImgHeight;
  40.         this.imageIndex--;
  41.         this.setTimerID=setTimeout(function(){_7e.menuMouseOutTimer();},this.iOutSpeed);
  42. };  

  43. GNB.prototype.clearTimeOut=function(){//取消定时
  44.         clearTimeout(this.setTimerID);
  45. };
  46. // ]]>
  47. </script>
复制代码


xhtml

<div class="Gnb_btn_div" id="gnb_btn_01">
<a class="Gnb_btn_img" href="#1" mce_href="#1">找朋友</a>
</div>  

<script type="text/javascript">
// <![CDATA[
var GNB1=new GNB(document.getElementById("gnb_btn_01"));//实例单个按钮,当然也可以多个
// ]]>
</script>

具体演示请看http://www.wler.cn/blog/?p=8  http://www.wler.cn/blog/lab/nav.html

[[i] 本帖最后由 buliuming 于 2007-11-27 11:14 编辑 ]

评分

参与人数 1威望 +1 收起 理由
帅青蛙 + 1 原创内容

查看全部评分

发表于 2007-11-27 11:19:23 | 显示全部楼层
这东西不错是不错,但麻烦了点
回复 支持 反对

使用道具 举报

发表于 2007-11-27 11:24:01 | 显示全部楼层
google里有这个效果。。如果为了这个效果写那么多JS,有点得不偿失!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-27 11:26:29 | 显示全部楼层
google的js还要麻烦.....
回复 支持 反对

使用道具 举报

发表于 2007-11-27 11:43:31 | 显示全部楼层
封装得不错,..好东西..收
回复 支持 反对

使用道具 举报

发表于 2007-11-27 11:46:24 | 显示全部楼层
很强哦 ,不过是不是用FLASH更好一点呢
回复 支持 反对

使用道具 举报

发表于 2007-11-27 12:24:09 | 显示全部楼层
发个我写的 代码更简洁 也是oop的

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

评分

参与人数 1威望 +1 收起 理由
帅青蛙 + 1 原创内容

查看全部评分

回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-27 13:42:11 | 显示全部楼层

不错

  不错
回复 支持 反对

使用道具 举报

发表于 2007-11-27 14:43:01 | 显示全部楼层
不错。。。。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-28 09:54:13 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2007-11-29 16:23:00 | 显示全部楼层
原帖由 [i]zcfg 于 2007-11-27 12:24 发表
发个我写的 代码更简洁 也是oop的
[html]

var hP=[0,-52,-104,-156,-208,-260,-312];

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, argume ...

强烈建议写段教程
回复 支持 反对

使用道具 举报

发表于 2007-11-30 08:34:37 | 显示全部楼层
zcfg  的封装,在鼠标经过图片(不是文字链接)时,会出现不正常
回复 支持 反对

使用道具 举报

发表于 2007-11-30 09:02:48 | 显示全部楼层
js注册事件啊,收啊
回复 支持 反对

使用道具 举报

发表于 2007-12-2 15:13:54 | 显示全部楼层
原帖由 [i]ddyanhui 于 2007-11-30 08:34 发表
zcfg  的封装,在鼠标经过图片(不是文字链接)时,会出现不正常

那么如何让他正常呢??
回复 支持 反对

使用道具 举报

发表于 2007-12-6 11:10:34 | 显示全部楼层
效果不错,实用性如何就不好说了。
平常喜欢用DW中鼠标经过图片的动作来实现比较方便。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-6 15:25:11 | 显示全部楼层

回复 #15 lucy0746 的帖子

....   
回复 支持 反对

使用道具 举报

发表于 2007-12-7 10:20:39 | 显示全部楼层
楼主,我想问一下定义和判断this.MouseOverFlag的作用是什么,我发现去掉了之后,效果也可以实现的??

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

回复 支持 反对

使用道具 举报

发表于 2007-12-15 01:44:13 | 显示全部楼层
原帖由 [i]electronixtar 于 2007-12-2 15:13 发表

[quote]原帖由 [i]ddyanhui 于 2007-11-30 08:34 发表
zcfg  的封装,在鼠标经过图片(不是文字链接)时,会出现不正常


那么如何让他正常呢?? [/quote]

是css的问题 把<style>内a的line-height改成37px就没问题了
回复 支持 反对

使用道具 举报

发表于 2008-3-25 16:27:22 | 显示全部楼层
晕 这不是偷GOOGLE的吗
回复 支持 反对

使用道具 举报

发表于 2008-7-22 11:15:09 | 显示全部楼层
我搞不懂得是为什么传递对象是<div>而不是<A>呢?
回复 支持 反对

使用道具 举报

发表于 2008-7-22 11:38:42 | 显示全部楼层
偶尔过来转转也能发现好东西,收啦
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-9-21 13:16 , Processed in 0.155854 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表