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 动态修改css文件的方法
Aug 05 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
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
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python类属性的延迟计算
2016/10/22 Python
python利用微信公众号实现报警功能
2018/06/10 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
酒吧创业计划书
2014/01/18 职场文书
采购助理岗位职责
2014/02/16 职场文书
《在家里》教后反思
2014/03/01 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
企业介绍信范文
2015/01/30 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书