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类和继承 constructor属性
Mar 04 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 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接口与接口引用的深入解析
2013/08/09 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Python实现二叉搜索树
2016/02/03 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
使用Python对SQLite数据库操作
2017/04/06 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
红旗方阵解说词
2014/02/12 职场文书
职称评定自我鉴定
2014/03/18 职场文书
销售顾问工作计划书
2014/08/15 职场文书
兴趣班停课通知
2015/04/24 职场文书
纪检监察立案决定书
2015/06/24 职场文书
关于童年的读书笔记
2015/06/26 职场文书
运动会广播稿200字
2015/08/19 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫