JS实现带圆弧背景渐变效果的导航菜单代码


Posted in Javascript onOctober 13, 2015

本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码。分享给大家供大家参考。具体如下:

这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用JavaScript控制了背景的移动,用jQuery实现过类似的功能,整体感觉很不错。

运行效果截图如下:

JS实现带圆弧背景渐变效果的导航菜单代码

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
javascript 类型判断代码分析
Mar 28 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
js数组依据下标删除元素
Apr 14 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 #Javascript
编写高性能Javascript代码的N条建议
Oct 12 #Javascript
JavaScript 性能优化小结
Oct 12 #Javascript
一个php+js实时显示时间问题
Oct 12 #Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 #Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 #Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 #Javascript
You might like
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP的5个安全措施小结
2012/07/17 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php浏览历史记录的方法
2015/03/10 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python格式化日期时间操作示例
2018/06/28 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
通俗讲解python 装饰器
2020/09/07 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
会计实习自我鉴定
2013/12/04 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
给护士表扬信
2014/01/19 职场文书
中药专业自荐信范文
2014/03/18 职场文书
建议书的格式
2014/05/12 职场文书