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 面向对象编程 聊聊对象的事
Sep 17 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
js查找节点的方法小结
Jan 13 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
node.js express框架简介与实现
Jul 23 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 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遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
axios实现简单文件上传功能
2019/09/25 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python将ip地址转换成整数的方法
2015/03/17 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
wxPython实现文本框基础组件
2019/11/18 Python
python字符串下标与切片及使用方法
2020/02/13 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
后备干部考察材料
2014/02/12 职场文书
博士生专家推荐信
2014/09/26 职场文书
机关作风建设心得体会
2014/10/22 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫