用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 相关文章推荐
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
js实现AI五子棋人机大战
May 28 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python可视化实现代码
2019/01/15 Python
python绘制地震散点图
2019/06/18 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
Python3的socket使用方法详解
2020/02/18 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
哪些情况下不应该使用索引
2015/07/20 面试题
土地转让协议书
2014/09/27 职场文书
实习班主任自我评价
2015/03/11 职场文书
水浒传读书笔记
2015/06/25 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android