编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery easyUI 更新行示例

Mar 06 Javascript

jQuery/CSS3图片特效插件整理推荐

Dec 07 Javascript

JavaScript数组Array对象增加和删除元素方法总结

Jan 20 Javascript

JS动态添加iframe的代码

Sep 14 Javascript

AngularJS中的Promise详细介绍及实例代码

Dec 13 Javascript

原生js实现简单的Ripple按钮实例代码

Mar 24 Javascript

js每隔两秒输出数组中的一项(实例)

May 28 Javascript

分享19个JavaScript 有用的简写写法

Jul 07 Javascript

Postman模拟发送带token的请求方法

Mar 31 Javascript

Vue.js实现的购物车功能详解

Jan 27 Javascript

Layui Table js 模拟选中checkbox的例子

Sep 03 Javascript

解决在Vue中使用axios用form表单出现的问题

Oct 30 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

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

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