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加解密功能页面
Dec 12 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
jquery.validate使用详解
Jun 02 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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微信公众账号开发之前五个坑(一)
2016/09/18 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
three.js实现圆柱体
2018/12/30 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python实现旋转和水平翻转的方法
2018/10/25 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
财务会计应届生求职信
2013/11/24 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
入党自荐书范文
2014/03/09 职场文书
贷款委托书范本
2014/04/08 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android