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 相关文章推荐
基于jquery的分页控件(C#)
Jan 06 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
vue 实现走马灯效果
Oct 28 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
JS判断数组四种实现方法详解
Jun 29 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
jQuery动画特效实例教程
2014/08/29 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
js实现旋转木马效果
2017/03/17 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
详解如何运行vue项目
2019/04/15 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python基础教程之五种数据类型详解
2017/01/12 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
大专应届生个人简历的自我评价
2013/10/15 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
一年级学生评语
2014/04/23 职场文书
集中整治工作方案
2014/05/01 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
校园安全教育心得体会
2016/01/15 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
Go语言测试库testify使用学习
2022/07/23 Golang