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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 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
第十四节--命名空间
2006/11/16 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
Javascript 获取LI里的内容
2008/12/17 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
Python 多线程的实例详解
2017/09/07 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python super用法及原理详解
2020/01/20 Python
python wsgiref源码解析
2021/02/06 Python
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
初二政治教学反思
2014/01/12 职场文书
教师党性分析材料
2014/02/04 职场文书
创先争优一句话承诺
2014/05/29 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
小学德育工作总结2015
2015/05/12 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Python OpenCV超详细讲解基本功能
2022/04/02 Python
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers
Go web入门Go pongo2模板引擎
2022/05/20 Golang