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 相关文章推荐
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
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 mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
js实现继承的5种方式
2015/12/01 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
vue更改数组中的值实例代码详解
2020/02/07 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python日期相关操作实例小结
2019/06/24 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
用Python实现职工信息管理系统
2020/12/30 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
学习自我鉴定
2014/02/01 职场文书
简历上的自我评价
2014/02/03 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
节约用水倡议书
2014/04/16 职场文书
公司节能减排方案
2014/05/16 职场文书
体现团队精神的口号
2014/06/06 职场文书