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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
Angular2 父子组件数据通信实例
2017/06/22 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
Python yield使用方法示例
2013/12/04 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
服务行业口号
2014/06/11 职场文书
青年标兵事迹材料
2014/08/16 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript