弧形背景html,JS实现带圆弧背景渐变效果的导航菜单代码
本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码。分享给大家供大家参考。具体如下:
这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用JavaScript控制了背景的移动,用jQuery实现过类似的功能,整体感觉很不错。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
圆弧背景的导航菜单
*{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;}
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;
}
};
var MyMenu = Class.create();
MyMenu.prototype = {
initilize:function(ul){
this.lis = ul.getElementsByTagName("li");
for(var i=0;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"));
}
- 欢迎光临
- 最新更新
- 下载排行
- 网页特效
- 广告联系
希望本文所述对大家的JavaScript程序设计有所帮助。
弧形背景html,JS实现带圆弧背景渐变效果的导航菜单代码相关推荐
- animate用法 js原生_用 原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...
- HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法 在页面中引入jquery和TweenMax.js的 ...
- JS仿淘宝网顶部的导航菜单
代码简介: JS仿淘宝网顶部的导航菜单.整合了购物车,收藏夹,搜索,搜索,网站导航等功能的导航. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- JS+CSS实现漂亮实用的红色导航菜单
代码简介: 强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的"下拉"菜单,应该叫滑出菜单吧?反正 ...
- JS超级酷的导航菜单代码
代码简介: JS超级酷的导航菜单代码,类似WINDOWS风格的导航,又又立体效果,很不错的,赶快运行一下,一睹为快吧. 代码内容: <HTML> <HEAD> <TITL ...
- 前端折线图中背景,Chart.js折线图设置背景颜色
I'm working with Chart.js and want to convert a line chart to a PNG. The problem is that the image a ...
- CSS Dock Menu:JS+CSS 仿苹果MAC机桌面导航菜单
所需源文件--见下方文件附件 在HTML中的<head>标签中插入如下代码: <script type="text/javascript" src="j ...
- 手机端导航栏html自适应,js+css3电脑手机端自适应响应式导航菜单代码
JS代码 function addListener(element, type, callback) { if (element.addEventListener) { element.addEven ...
- JavaScript教程:使用P5.js创建带纹理的纸张背景
上周,我介绍了生成艺术的概念P5.js,以及有关P5.js的一些设置问题. 我给您留下了一个脚手架的存储库 ,该存储库使所有项目设置麻烦事都消除了,但是我们还没有研究任何东西. 本周,我们将开始实际制 ...
最新文章
- python3 的encode 和 decode
- 网络推广——网络推广如何安排网站关键词的布局策略?
- Coursera吴恩达《神经网络与深度学习》课程笔记(2)-- 神经网络基础之逻辑回归
- 2019ICPC(沈阳) - Fish eating fruit(树形dp+树根转移)
- java socket 阻塞模式_Java中Socket Read阻塞问题
- 数据库每日一题 2020.04.29
- 【论文写作】本科、硕士研究生毕业论文格式问题
- 【Web前端】自制精简版的思源黑体ttf(728kb) - 包含2630个常用汉字+字母+数字+常用符号
- 微信订阅号改版,我有这些看法
- js获取本地文件(图片、word文档等)并获取其Base64化的编码,可用于本地文件上传至服务器
- windows7 照片查看器无法打开图片, windows提示因为可用内存不足,但我的内存4G?
- c语言逻辑运算符组合,C语言的逻辑运算符
- dojo 框架实战笔记
- zabbix 参数 脚本_zabbix 自定义脚本短信报警
- R语言wmf矢量图片导出大片空白及搜索网站
- premiere cs6导出视频格式
- dfuse API 添加新分类查询,为您提供更多细化的搜索
- 【SSM电商项目后台开发】001-数据库建表
- k8s 拉取镜像失败_kubernetes k8s.gcr.io拉取镜像失败问题
- torch_points_kernels遭遇 ModuleNotFoundError: No module named ‘torch_points_kernels.points_cpu‘