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 相关文章推荐
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
You might like
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP的全局错误处理详解
2016/04/25 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
使用jQuery实现返回顶部
2015/01/26 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
JS 事件机制完整示例分析
2020/01/15 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
将python安装信息加入注册表的示例
2019/11/20 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
浅析Python的命名空间与作用域
2020/11/25 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
临床医学专业学生的自我评价分享
2013/11/21 职场文书
九年级家长会邀请函
2014/01/15 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
股份合作协议书
2014/04/12 职场文书
退税申请报告怎么写
2015/05/18 职场文书
七一晚会主持词
2015/06/29 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
MySQL 原理与优化之Update 优化
2022/08/14 MySQL