用javascript来实现动画导航

buliuming 楼主

原理

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


准备

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

代码

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

css

1. .Gnb_btn_div{
   
2.         width:90px;
   
3.         height:75px;
   
4.         overflow:hidden;
   
5.         display:block;
   
6.         position:absolute;
   
7. }  
   
8. 
   
9. .Gnb_btn_img{
   
10.         width:100%;
    
11.         height:525px;
    
12.         display:block;
    
13.         overflow:hidden;
    
14.         text-indent:-500px;
    
15. }
    
16. #gnb_btn_01 .Gnb_btn_img {
    
17.         background-image:url(http://www.wler.cn/blog/img/friend.gif)
    
18. }

复制代码

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. 
    
11.         this.MouseOverFlag=false;
    
12.         this.imageIndex=0;
    
13.         if(this.eventObj==null){return;}
    
14.         this.eventObj.parentClass=this;this.eventAssign();
    
15. }  
    
16. 
    
17. GNB.prototype.eventAssign=function(){//注册事件
    
18.         this.eventObj.onmouseover=this.menuMouseOver;
    
19.         this.eventObj.onmouseout=this.menuMouseOut;
    
20. };  
    
21. 
    
22. GNB.prototype.menuMouseOver=function(){//鼠标经过
    
23.         if(this.parentClass.MouseOverFlag!=false){return;}
    
24.         this.parentClass.MouseOverFlag=true;
    
25.         this.parentClass.clearTimeOut();
    
26.         this.parentClass.menuMouseOverTimer();
    
27. };  
    
28. 
    
29. GNB.prototype.menuMouseOut=function(){//鼠标离开
    
30.         this.parentClass.MouseOverFlag=false;
    
31.         this.parentClass.clearTimeOut();
    
32.         this.parentClass.menuMouseOutTimer();
    
33. };  
    
34. 
    
35. GNB.prototype.menuMouseOverTimer=function(){//经过图片位置递增
    
36.         var _7d=this;
    
37.         if(this.imageIndex>=this.iImgNum){return;}
    
38.         this.eventObj.scrollTop=this.imageIndex*this.iImgHeight;
    
39.         this.imageIndex++;
    
40.         this.setTimerID=setTimeout(function(){_7d.menuMouseOverTimer();},this.iOverSpeed);
    
41. };  
    
42. 
    
43. GNB.prototype.menuMouseOutTimer=function(){////经过图片位置递减
    
44.         var _7e=this;if(this.imageIndex<0){return;}
    
45.         this.eventObj.scrollTop=this.imageIndex*this.iImgHeight;
    
46.         this.imageIndex--;
    
47.         this.setTimerID=setTimeout(function(){_7e.menuMouseOutTimer();},this.iOutSpeed);
    
48. };  
    
49. 
    
50. GNB.prototype.clearTimeOut=function(){//取消定时
    
51.         clearTimeout(this.setTimerID);
    
52. };
    
53. // ]]>
    
54. </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

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

alljill

这东西不错是不错,但麻烦了点

unicac

google里有这个效果。。如果为了这个效果写那么多JS，有点得不偿失！

buliuming 楼主

google的js还要麻烦.....

wuleying

封装得不错,..好东西..收

vvsamln

很强哦 ，不过是不是用FLASH更好一点呢

zcfg

发个我写的 代码更简洁 也是oop的

<script> var hP=[0,-52,-104,-156,-208,-260,-312]; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var gM = Class.create(); gM.prototype = { initialize:function(vP,url,description) { var TO,i=0; var d=document.createElement("div"); var a=document.createElement("a"); var s=document.createElement("span"); var t=document.createTextNode(description); s.style.backgroundPosition="left "+vP+"px"; a.setAttribute("href",url); a.appendChild(s); a.appendChild(t); d.appendChild(a); document.body.appendChild (d); a.onmouseover=function() { if(i<hP.length) { s.style.backgroundPosition=hP[i]+"px "+vP+"px"; i++; TO=setTimeout(arguments.callee,60); } else clearTimeout(TO); }; a.onmouseout=function() { clearTimeout(TO); if(i>0) { s.style.backgroundPosition=hP[i-1]+"px "+vP+"px"; i--; TO=setTimeout(arguments.callee,60); } else clearTimeout(TO); }; } //, } function init() { new gM('0','#','Gmail'); new gM('-37','#','Calendar'); new gM('-74','#','Toolbar'); new gM('-111','#','Desktop'); new gM('-148','#','Picasa'); new gM('-185','#','Gtalk'); new gM('-222','#','Notebook'); } window.onload=init; </script> <style> a { text-decoration:none; display:block; float:left; line-height:50px; } div { width:120px; } span { width:52px; height:37px; background:url(http://www.google.co.kr/ig/f/AaEyQnOaAr4/intl/ALL_kr/svc_sprite_all.gif ) no-repeat left top; float:left; } </style>

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

buliuming 楼主

  不错

136518411

不错。。。。。

buliuming 楼主

yfstudio

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

强烈建议写段教程

ddyanhui

zcfg  的封装，在鼠标经过图片（不是文字链接）时，会出现不正常

skybot

js注册事件啊,收啊

electronixtar

原帖由 ddyanhui 于 2007-11-30 08:34 发表
zcfg  的封装，在鼠标经过图片（不是文字链接）时，会出现不正常

那么如何让他正常呢？？

lucy0746

效果不错，实用性如何就不好说了。
平常喜欢用DW中鼠标经过图片的动作来实现比较方便。

buliuming 楼主

....   

berain

楼主，我想问一下定义和判断this.MouseOverFlag的作用是什么，我发现去掉了之后，效果也可以实现的？？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name='keywords' content='' /> <meta name='description' content='' /> <title>用javascript来实现动画导航</title> <style> <!-- /*我直接把CSS写这了*/ div.header{width:1000px;height:200px;margin:0 auto;position:relative} .Gnb_btn_div{width:90px;height:75px;overflow:hidden;display:block;position:absolute;} .Gnb_btn_img{width:100%;height:525px;display:block;overflow:hidden;text-indent:-500px;} #gnb_btn_01 .Gnb_btn_img {background-image: url(http://www.ddlucky.com/image/home/friend.gif)} #gnb_btn_01 {bottom:12px;left:160px; } --> </style> </head> <body> <div class="header"> <div class="Gnb_btn_div" id="gnb_btn_01"><a class="Gnb_btn_img" href="#1">找朋友</a></div> </div> <script type="text/javascript"> // <![CDATA[ function GNB(_7c){ this.iImgNum=7; this.iImgHeight=75; this.iOverSpeed=50; this.iOutSpeed=50; this.eventObj=_7c; // this.MouseOverFlag=false; this.imageIndex=0; if(this.eventObj==null){return;} this.eventObj.parentClass=this;this.eventAssign(); } GNB.prototype.eventAssign=function(){ this.eventObj.onmouseover=this.menuMouseOver; this.eventObj.onmouseout=this.menuMouseOut; }; GNB.prototype.menuMouseOver=function(){ // if(this.parentClass.MouseOverFlag!=false){return;} // this.parentClass.MouseOverFlag=true; this.parentClass.clearTimeOut(); this.parentClass.menuMouseOverTimer(); }; GNB.prototype.menuMouseOut=function(){ // this.parentClass.MouseOverFlag=false; this.parentClass.clearTimeOut(); this.parentClass.menuMouseOutTimer(); }; GNB.prototype.menuMouseOverTimer=function(){ var _7d=this; if(this.imageIndex>=this.iImgNum){return;} this.eventObj.scrollTop=this.imageIndex*this.iImgHeight; this.imageIndex++; this.setTimerID=setTimeout(function(){_7d.menuMouseOverTimer();},this.iOverSpeed); }; GNB.prototype.menuMouseOutTimer=function(){ var _7e=this;if(this.imageIndex<0){return;} this.eventObj.scrollTop=this.imageIndex*this.iImgHeight; this.imageIndex--; this.setTimerID=setTimeout(function(){_7e.menuMouseOutTimer();},this.iOutSpeed); }; GNB.prototype.clearTimeOut=function(){ clearTimeout(this.setTimerID); }; var GNB1=new GNB(document.getElementById("gnb_btn_01")); //]]> </script> </body> </html>

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

zcfg

原帖由 electronixtar 于 2007-12-2 15:13 发表

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

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

是css的问题 把<style>内a的line-height改成37px就没问题了

haocat

晕 这不是偷GOOGLE的吗

stkk

我搞不懂得是为什么传递对象是＜div＞而不是＜Ａ＞呢？

ylw1230

偶尔过来转转也能发现好东西,收啦