jQuery滑动拉伸导航按钮特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery滑动拉伸导航按钮特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>jQuery滑动拉伸导航按钮</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="css/borrar.css"/>
	<link rel="stylesheet" type="text/css" href="css/estilos.css"/>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/general.js"></script>
</head>

<body>
<ul id="iconbar">
	<li><a href="#">
		<img src="images/key.gif" alt="" />
		<span>Change your password</span>
	</a></li>
	<li><a href="#" target="_blank">
		<img src="images/rss.gif" alt="" />
		<span>Suscribe to our RSS!</span>
	</a></li>
	<li><a href="#">
		<img src="images/sel.gif" alt="" />
		<span>Choose your options!</span>
	</a></li>
</ul>
</body>
</html>

JS代码(general.js):

jQuery.preloadImages = function(){
	for(var i = 0;
	i<arguments.length;
	i++)jQuery("<img>").attr("src",arguments[i]);
}
jQuery.preloadImages("../images/key.gif","../images/keyo.gif","../images/rss.gif","../images/rsso.gif","../images/sel.gif","../images/selo.gif");
	jQuery(document).ready(function(){
	$("#iconbar li a").hover(function(){
	var iconName = $(this).children("img").attr("src");
	var origen = iconName.split(".gif")[0];
	$(this).children("img").attr({
	src:"" + origen + "o.gif"}
);
	$(this).css("cursor","pointer");
	$(this).animate({
	width:"140px"}
,{
	queue:false,duration:"normal"}
);
	$(this).children("span").animate({
	opacity:"show"}
,"fast");
}
,function(){
	var iconName = $(this).children("img").attr("src");
	var origen = iconName.split("o.")[0];
	$(this).children("img").attr({
	src:"" + origen + ".gif"}
);
	$(this).animate({
	width:"24px"}
,{
	queue:false,duration:"normal"}
);
	$(this).children("span").animate({
	opacity:"hide"}
,"fast");
}
);
}
);

CSS代码(borrar.css):

/*Copyright (c) 2007,Yahoo! Inc. All rights reserved.Code licensed under the BSD License:http://developer.yahoo.net/yui/license.txtversion:2.2.2*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}

CSS代码(estilos.css):

body{background:#ffffff;font:11px "Trebuchet MS",Verdana,Arial,sans-serif;}
p{padding-bottom:10px;position:absolute;left:47%;bottom:5px;}
p a{text-decoration:none;outline:none;color:#d00000;}
p a:hover{border-bottom:2px dotted #d00000;}
#iconbar{position:absolute;top:45%;left:45%;text-shadow:0 1px 0 #eee;}
#iconbar li{float:left;position:relative;margin-right:20px;background:#E8E8F9;border:1px dashed #ffc0ff;overflow:hidden;}
#iconbar a{text-decoration:none;outline:none;color:#d00000;display:block;width:24px;padding:10px;cursor:pointer;}
#iconbar span{width:100px;height:35px;position:absolute;display:none;line-height:110%;color:#409BED;padding-left:10px;}

附件:下载该文件资源,减少时间成本(增值服务)