JS實現(xiàn)帶圓弧背景漸變效果的導航菜單代碼
更新時間：2015年10月13日 09:28:51 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)帶圓弧背景漸變效果的導航菜單代碼,涉及JavaScript基于鼠標事件操作頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)帶圓弧背景漸變效果的導航菜單代碼。分享給大家供大家參考。具體如下：
這是一款效果個性的JS+CSS導航菜單，鼠標經(jīng)過時出現(xiàn)有趣弧形背景，實際上，這里用CSS調用了背景，用JavaScript控制了背景的移動，用jQuery實現(xiàn)過類似的功能，整體感覺很不錯。
運行效果截圖如下：
在線演示地址如下：
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="#">網(wǎng)頁特效</a></li>
<li><a href="#">廣告聯(lián)系</a></li>
</ul>
</div>
</body>
</html>
希望本文所述對大家的JavaScript程序設計有所幫助。
相關文章
本篇帶來15個正則使用場景，按需索取，收藏恒等于學會！！有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)購物網(wǎng)站商品放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Ajax 加載數(shù)據(jù)，主要是為了查詢表的顯示，不用嵌入php通過ajax調用，現(xiàn)在手機端的更多顯示功能都是通過ajax實現(xiàn)的2017-01-01
因為對于內容的刪除是件很重要的事，所以一般的系統(tǒng)中，都需要刪除確認一下，以免誤刪，具體的方法如下，大家可以參考下。2009-12-12
js如何使用Pagination+PageHelper實現(xiàn)分頁
本文主要介紹了js如何使用Pagination+PageHelper實現(xiàn)分頁，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
JS獲取下拉列表所選中的TEXT和Value的實現(xiàn)代碼
本篇文章主要是對JS獲取下拉列表所選中的TEXT和Value的實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要來和大家詳細介紹一下JavaScript中map和parseInt的用法，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以了解一下2023-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標移入圖片放大效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JS co 函數(shù)庫的含義和用法,結合實例形式總結分析了JS co 函數(shù)庫的基本含義、功能、用法及操作注意事項,需要的朋友可以參考下2020-04-04
附加導航（Affix）插件允許某個 <div> 固定在頁面的某個位置。接下來通過本文給大家介紹Bootstrap 附加導航（Affix）插件實例詳解，感興趣的朋友一起看看吧2016-06-06