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 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
jquery text()要注意啦
Oct 30 Javascript
js常用代码段整理
Nov 30 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
微信小程序select下拉框实现源码
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文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
php技巧小结【推荐】
2017/01/19 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Python简单I/O操作示例
2019/03/18 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
python脚本后台执行方式
2019/12/21 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
人力资源部经理岗位职责规定
2014/02/23 职场文书
请假条标准格式规范
2014/04/10 职场文书
技术员个人工作总结
2015/03/03 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
情况说明书怎么写
2015/10/08 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
学习nginx基础知识
2021/09/04 Servers
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android