如何使用jQuery创建渐变按键
时间：2010-08-22 来源：KimCastle
在看过同学写的jQuery之后，感觉jQuery真的很强大，jQuery可以使得JavaScript的应用更加的出色。在介绍如何使用jQuery创建渐变按键之前。我们先来看一点关于jQuery的小知识
wrapInner(html)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。
返回值：jQuery
参数：
html (String) : HTML标记代码字符串，用于动态生成元素并包装目标元素
示例：
把所有段落内的每个子内容加粗
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>jQuery 代码:
$("p").wrapInner("<b></b>");
结果:
<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
之所以要介绍一下上面的小知识是有些读者可能没有接触过jQuery，在后面可能就会有疑问。
如何使用jQuery创建渐变按键
STEP1：PhotoShop
(1).在photoshop中新创建一个宽:200px;高：160px的图像：
(2).因为要做两个按键，所以我们先用网格线将图像平分为两个部分如下图：
(3).选择圆角矩形工具，设置半径为0.5厘米，或者10px;画出按键，如下图所示：
(4).双击图层，打开图层样式表如下图：
选择“渐变叠加”，混合模式为“正常”；不透明度为“100%”；双击渐变工具：
渐变工具颜色由：#3d3d3d到#8b8b8b
选择内发光，混合模式为：正常；不透明度为：100%；颜色：#FFFFFF；大小为3px；
选择内发光，大小：1；混合模式为：正常；颜色为：黑色#000000
(5)添加字体:前端开发；字号为：36px;AV：10；加粗；平滑
（6）设置字体样式：投影，混合模式为正常；角度90；距离1px；大小：2px;
设置内阴影：混合模式为：正常；距离为：1px;大小为:2px;
(7)这是我们最终完成的按钮：
(8)接下来我们制作悬停按键，为的方便我们采用复制方式，首先把上面创作的按键放在文件夹中，再加以复制
(9)修改hover的图层属性,渐变颜色从#1B75A6到#5FB5E4
修改描边颜色为:#004D77
(10)添加图层半透明效果,新建一个图层,用矩形选框选择半个按钮,并填冲白色.最后设置图层的不透明度为20;
(11)最终完成的按键图如下所示:
STEP2:HTML/CSS
1.下面为部分HTML代码,而javascript部分可以先不看,后面会有介绍.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>渐变按键演示</title>
<link href="zt.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready
(
function()
{
$('.jqbutton').wrapInner('<span class="hover"></span>').each(
function()
{
$('span.hover').css('opacity', 0).hover(function(){$(this).stop().fadeTo(650, 1);}, function (){$(this).stop().fadeTo(650, 0);} )
}
)
}
)
</script>
</head>
<body>
<div class="CS">
<p><a href="#">纯CSS样式的按键</a></p>
<h5>纯CSS样式的按键</h5>
</div>
<div class="JQ">
<p><a href="#" class="jqbutton">使用jQuery之后的按键</a></p>
<h5>使用JQuery的按键</h5>
</div>
</body>
</html>
2.所需要写的CSS样式如下所示:
/**-----纯CSS样式-------**/
.CS a{text-indent:-9999px; display:block;width:200px; background:url(btn.jpg) bottom no-repeat; }
.CS a:hover{text-indent:-9999px; display:block;width:200px; background:url(btn.jpg) top no-repeat; cursor:pointer;}
.CS h5{ margin-top:-10px; margin-left:40px;}
/**------使用jQuery-------**/
.jqbutton{ position:relative; cursor:pointer;text-indent:-9999px; display:block;width:200px; background:url(btn.jpg) bottom no-repeat; }
.JQ h5{margin-top:-10px; margin-left:40px;}
.jqbutton span.hover{position:absolute; cursor:pointer; text-indent:-9999px; display:block; width:200px; background:url(btn.jpg) top no-repeat;}
3.使用JavaScript/jQuery进行按键的渐变显示
3.1其实这一段代码相信细心的朋友已经在前面发现了,没错就是下面这一段代码,接下来我们将来看这段代码是如何工作的:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready
(
function()
{
$('.jqbutton').wrapInner('<span class="hover"></span>').each(
function()
{
$('span.hover').css('opacity', 0).hover(function(){$(this).stop().fadeTo(650, 1);}, function (){$(this).stop().fadeTo(650, 0);} )
}
)
}
)
</script>
3.2下面这一行代码是jQuery的核心代码,在使用jQuery必须首先引用它.是一个jquery的方法库，你只要包含到你的HTML文件中就可以使用jquery了。它的详细介绍请参考:http://jquery.com
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
3.3jQuery是如何实现按键的渐变的呢？因为本人第一次接触到jQuery，所以有错误的地方还请指正。下面就说说我自己的研究分析结果：
在3.1的代码中，jQuery所在实现在目地是当HTML页面在加载完HTML代码之后，利用DOM树来给出 下面这行代码的<p>标签内嵌入一个<span>层，并给<span>层的Class设置为：class="hover"；
<p><a href="#" class="jqbutton">使用jQuery之后的按键</a></p>
我将使用jQuery前的HTML代码与使用jQuery后的代码进行对比(可利用FireFox浏览器的firebug查看代码)如下图所示：
明白这一点之后，下面这部分代码就是设置按键的样式：当鼠标悬浮在按键上面时，
设置一个图片的透明度属性的变化，这样子我们看起来就是按键发生了渐变的效果。
最终的演示点击请看：jQuery创建渐变按键演示
渐变按键演示
纯CSS样式的按键
纯CSS样式的按键
使用jQuery之后的按键
使用JQuery的按键
相关阅读 更多 +
