原理

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


准备

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

代码

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

css

复制内容到剪贴板

代码:

.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.wler.cn/blog/img/friend.gif)
}

javascript

复制内容到剪贴板

代码:

<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);
};
// ]]>
</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 编辑 ]

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

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

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

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

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

发个我写的 代码更简洁 也是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>
 提示：您可以先修改部分代码再运行

  不错

不错。。。。。

引用:

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

强烈建议写段教程

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

js注册事件啊,收啊

引用:

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

那么如何让他正常呢？？

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

....   

楼主，我想问一下定义和判断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>
 提示：您可以先修改部分代码再运行

引用:

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

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

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

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

晕 这不是偷GOOGLE的吗

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

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