用javascript来实现动画导航效果的代码


Posted in Javascript onDecember 16, 2007

谁在用这些导航
google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜js写的太多了,那自己写一个吧?好,就这么干!
原理
小时候,总喜欢看动画片吧,动画片是怎样实现的呢?记得妈妈说是一张画一张画切换过去(啊?那一部葫芦兄弟要画多少副画啊? -_-! ),其实我们现在做的也是这样,用一个图片,这个图片里有很多个小图,来显示动画轨迹.按时间来移动图片,那图片不是会动了啊?(不知道,表达清楚了没…语文很重要啊!!)
准备
我们需要一张图片,一个大脑,一张会笑的脸(不笑效果就出不来了….)!!下面是我准备的图片(ps水平有限^_^)…
用javascript来实现动画导航效果的代码
代码

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

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(/resources/imgs/img_not_found.png)  

}

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" href="#1">找朋友</a>  

</div>       

<script type="text/javascript">  

// <![CDATA[  

var GNB1=new GNB(document.getElementById("gnb_btn_01"));//实例单个按钮,当然也可以多个  

// ]]>  

</script>

演示地址
Javascript 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
jquery获取radio值实例
Oct 16 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 #Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 #Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 #Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 #Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 #Javascript
我见过最全的个人js加解密功能页面
Dec 12 #Javascript
文本链接逐个出现的js脚本
Dec 12 #Javascript
You might like
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
基于js中this和event 的区别(详解)
2017/10/24 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python 的 Socket 编程
2015/03/24 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
测绘工程本科生求职信
2013/10/10 职场文书
房屋出售授权委托书
2014/10/12 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
企业法律事务工作总结
2015/08/11 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers