JQery 渐变图片导航效果代码 漂亮


Posted in Javascript onJanuary 01, 2010

JQery 渐变图片导航效果代码 漂亮

图片如上。。下载图片试试。。效果不错哦。。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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>测试导航</title> 
<script src="http://img.3water.com/jslib/jquery/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
var datacss=["home","game","zine","community","calendar","participate"]; 
for(var i=0;i<datacss.length;i++) 
{ 
$("#"+datacss[i]).append("<div class='"+datacss[i]+"'></div>"); 
$("."+datacss[i]).css('opacity', 0); 
$("#"+datacss[i]).hover( 
function() 
{ 
$("."+this.id).stop().animate({opacity: '1'},800); 
}, 
function() 
{ 
$("."+this.id).stop().animate({opacity: '0'},800); 
}); 
} 
}); 
</script> 
<style type="text/css"> 
body { } ul li{ list-style:none; float:left; margin:0; padding:0;} 
#home{background: url(navigation.jpg) top left no-repeat; 
width:90px; height:55px; 
} 
.home {background: url(navigation.jpg) 0 -55px no-repeat; 
width: 90px;height: 55px; 
} 
#game{background: url(navigation.jpg) -90px 0px; no-repeat; 
width:114px; height:55px; 
} 
.game{background: url(navigation.jpg) -90px -55px no-repeat; 
width:114px; height:55px; 
} 
#zine{background: url(navigation.jpg) -204px 0px; no-repeat; 
width:96px; height:55px; 
} 
.zine{background: url(navigation.jpg) -204px -55px no-repeat; 
width:96px; height:55px; 
} 
#community{background: url(navigation.jpg) -300px 0px; no-repeat; 
width:144px; height:55px; 
} 
.community{background: url(navigation.jpg) -300px -55px no-repeat; 
width:144px; height:55px; 
} 
#calendar{background: url(navigation.jpg) -446px 0px; no-repeat; 
width:137px; height:55px; 
} 
.calendar{background: url(navigation.jpg) -446px -55px no-repeat; 
width:137px; height:55px; 
} 
#participate{background: url(navigation.jpg) -583px 0px; no-repeat; 
width:135px; height:55px; 
} 
.participate{background: url(navigation.jpg) -583px -55px no-repeat; 
width:135px; height:55px; 
} 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#"><div id="home"></div></a></li> 
<li><a href="#"><div id="game"></div></a></li> 
<li><a href="#"><div id="zine"></div></a></li> 
<li><a href="#"><div id="community"></div></a></li> 
<li><a href="#"><div id="calendar"></div></a></li> 
<li><a href="#"><div id="participate"></div></a></li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
jquery 简短右键菜单 多浏览器兼容
Jan 01 #Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 #Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 #Javascript
url 特殊字符 传递参数解决方法
Jan 01 #Javascript
JavaScript 数组循环引起的思考
Jan 01 #Javascript
javascript eval和JSON之间的联系
Dec 31 #Javascript
js下用gb2312编码解码实现方法
Dec 31 #Javascript
You might like
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
再论Javascript下字符串连接的性能
2011/03/05 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python中zip()函数用法实例教程
2014/07/31 Python
Python使用chardet判断字符编码
2015/05/09 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python中bisect的用法及示例详解
2020/07/20 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
国际商务专业求职信
2014/07/15 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
2015年母亲节寄语
2015/03/23 职场文书
主题班会开场白
2015/06/01 职场文书
小学运动会开幕词
2016/03/04 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript