JS实现带圆弧背景渐变效果的导航菜单代码
更新时间：2015年10月13日 09:28:51 作者：企鹅
这篇文章主要介绍了JS实现带圆弧背景渐变效果的导航菜单代码,涉及JavaScript基于鼠标事件操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码。分享给大家供大家参考。具体如下：
这是一款效果个性的JS+CSS导航菜单，鼠标经过时出现有趣弧形背景，实际上，这里用CSS调用了背景，用JavaScript控制了背景的移动，用jQuery实现过类似的功能，整体感觉很不错。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/
具体代码如下：
<!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">
<head>
<title>圆弧背景的导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0px;padding:0px;font-size:12px;}
.div_menu{ position:absolute;left:100px;top:100px;}
.ul_menu{list-style:none;}
.ul_menu li{float:left;margin-left:1px;border:1px solid #33CCCC;display:block;padding:5px 3px;background:url(images/menu_bg.gif) repeat-x 0px -80px;padding:2px 12px;}
.ul_menu li a{height:40px;width:auto;color:#ffffff;font-size:20px;font-weight:600;text-decoration:none;}
</style>
<script type="text/javascript">
var isIE = (document.all)?true:false;
var $ID = function(id){
return "string"==typeof id?document.getElementById(id):id;
}
var Class = {
create:function(){
return function(){
this.initilize.apply(this,arguments);
}
}
}
var Extend = function(destination, source){
for(var property in source){
destination[property] = source[property];
}
}
var Bind = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
return fun.apply(object,args);
}
}
var BindAsEventListener = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event){
return fun.apply(object,[event||window.event].concat(args));
}
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
</script>
<script type="text/javascript">
var MyMenu = Class.create();
MyMenu.prototype = {
initilize:function(ul){
this.lis = ul.getElementsByTagName("li");
for(var i=0;i<this.lis.length;i++){
new BgChange(this.lis[i]);
}
}
}
var BgChange = Class.create();
BgChange.prototype = {
initilize:function(li){
this.li = li;
this._fnMouseOver = Bind(this,this.MouseOver);
this._fnMouseOut = Bind(this,this.MouseOut);
addEventHandler(this.li,"mouseover",this._fnMouseOver);
addEventHandler(this.li,"mouseout",this._fnMouseOut);
this.timer = null;
this.i = -80;
},
MouseOver:function(){
this.Stop();
this.i+=2;
if(this.i>=0){
window.clearTimeout(this.timer);
this.i = 0;
}else{
this.ShowBg();
this.timer = window.setTimeout(this._fnMouseOver,10);
}
},
MouseOut:function(){
this.Stop();
this.i-=2;
if(this.i<=-80){
window.clearTimeout(this.timer);
this.i = -80;
}else{
this.ShowBg();
this.timer = window.setTimeout(this._fnMouseOut,10);
}
},
ShowBg:function(){
this.li.style.backgroundPosition = "0px " + this.i + "px";
},
Stop:function(){
if(this.timer){
window.clearTimeout(this.timer);
}
}
}
onload = function(){
new MyMenu($ID("ul_menu"));
}
</script>
</head>
<body>
<div class="div_menu">
<ul class="ul_menu" id="ul_menu">
<li><a href="#">欢迎光临</a></li>
<li><a href="#">最新更新</a></li>
<li><a href="#">下载排行</a></li>
<li><a href="#">网页特效</a></li>
<li><a href="#">广告联系</a></li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
相关文章
本篇带来15个正则使用场景，按需索取，收藏恒等于学会！！有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了js实现购物网站商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了Ajax 加载数据，主要是为了查询表的显示，不用嵌入php通过ajax调用，现在手机端的更多显示功能都是通过ajax实现的2017-01-01
因为对于内容的删除是件很重要的事，所以一般的系统中，都需要删除确认一下，以免误删，具体的方法如下，大家可以参考下。2009-12-12
js如何使用Pagination+PageHelper实现分页
本文主要介绍了js如何使用Pagination+PageHelper实现分页，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
本篇文章主要是对JS获取下拉列表所选中的TEXT和Value的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要来和大家详细介绍一下JavaScript中map和parseInt的用法，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下2023-05-05
这篇文章主要为大家详细介绍了js实现鼠标移入图片放大效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JS co 函数库的含义和用法,结合实例形式总结分析了JS co 函数库的基本含义、功能、用法及操作注意事项,需要的朋友可以参考下2020-04-04
附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。接下来通过本文给大家介绍Bootstrap 附加导航（Affix）插件实例详解，感兴趣的朋友一起看看吧2016-06-06
最新评论