用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 相关文章推荐
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 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
PHP自动更新新闻DIY
2006/10/09 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
javascript 常用功能总结
2012/03/18 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
微信小程序日历效果
2018/12/29 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
python实现简易内存监控
2018/06/21 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
weblogic面试题
2016/03/07 面试题
自荐信模版
2013/10/24 职场文书
怎么写有吸引力的自荐信
2013/11/17 职场文书
办公室助理岗位职责
2013/12/25 职场文书
优秀学生评语大全
2014/04/25 职场文书
活动总结怎么写啊
2014/05/07 职场文书
设备收款委托书范本
2014/10/02 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
基于Python实现一个春节倒计时脚本
2022/01/22 Python
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
Python Pandas解析读写 CSV 文件
2022/04/11 Python