jQuery打造动态渐变按钮（5）
作者：mankaiviky 来源：蓝色理想 发布时间：2010-05-10 20:21:00
标签：jquery,动态,按钮,渐变
Step2 - HTML/CSS
按钮的HTML代码很简单：
<a class=”button”>前端档案</a>
再通过CSS设置一下背景图片就可以了，CSS代码如下：
/*链接按钮样式*/
.button {
width:200px;
height:80px;
display:block;
background:url(bg_button.gif) top no-repeat;
text-indent:-9999px;
}
/*按钮悬停样式*/
.button:hover{
background:url(bg_button.gif) bottom no-repeat;
}
按照我们前面设计的图片，按钮的长宽为200px X 80px，背景图为黑色按钮。这段CSS就能够实现我们示例中的第一种效果（纯CSS效果）。
Step3 - JavaScript/jQuery
通过JavaScript，我们可以让按钮更加炫酷一些，我们需要在之前基础上加一个<span>元素，作为鼠标悬停时候显示的背景层，那么HTML会在DOM加载完成后修改成为：
<a class=”button”><span class=”hover”>前端档案</span></a>
<span>元素在鼠标悬停前是全透明的，鼠标经过时，逐渐不透明，以达到渐变的效果，动画过程如下图：
通过以上分析，我们可以写出jQuery代码如下，在DOM加载完成后，为按钮链接添加<span>层作为鼠标经过时的背景图，在为<span>元素添加鼠标悬停事件，鼠标经过时，渐变至不透明，鼠标离开时，渐变至全透明。
//把文本包含到<span>元素中，再附加到.button中
$('.jsbutton,.viewbutton,.downloadbutton').wrapInner('<span class="hover"></span>').css('textIndent','0').each(function () {
//先设置<span>元素中全透明，再添加鼠标悬停事件
$('span.hover').css('opacity', 0).hover(function () {
$(this).stop().fadeTo(650, 1); //渐变至不透明
}, function () {
$(this).stop().fadeTo(650, 0); //渐变至全透明
});
});
至此，我们完成了JS代码，还要注意一个步骤，CSS修改，见Step4。
0
投稿猜你喜欢
- 如何在线更改密码？<％id = Request("id")newpassword =
- 问：怎样解决mysql连接过多的错误？答：系统不能连接数据库，关键要看两个数据：1、数据库系统允许的最大可连接数max_connection
- 1.如何将Query String传送到另一个ASP文件去？Response.Redirect("second.asp?
- 在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节。CSS是Cascad
- 近日在月影的blog上找到一段代码。看了老半天没明白什么意思，倍受打击！不死心，于是仔细分析思考了好几次，才明白过来这段函数的意义。js果然
- 下面通过对比来看看ASP中3种分页显示的性能，执行效率。一，使用存储过程分页，这种情况又分为两种方式：第一种，使用command对象，如下：
- 我们先看一下JavaScript中关系运算符的类型转换规则：关系运算符（<、>、<=、>=） 试图将 express
CSS处理斜角导航条的一个例子，这个是写着测试用的。暂没有实际的应用。斜角处理比较麻烦，主要有两个地方。1、图片处理。2、负数的理解。这两个- 关于mysql数据库在Linux下的应用一直以来都是我认为比较棘手的，这次通过搭建Linux学习环境顺便研究和学习Mysql数据库在Linu
- 今天在开发一个手机短信通讯录的前端界面时，界面中使用了checkbox，来做为各项的选择控件，但是操作时，除了点差子。由于逻辑需要，需要预先
- 索引是快速搜索的关键。MySQL索引的建立对于MySQL的高效运行是很重要的。下面介绍几种常见的MySQL索引类型。在数据库表中，对字段建立
- 在MySQL中有两种方法1、create table t_name select ...2、create table t_name like
- 作用: 构建一些简单的SQL语句，结合在提交表单时使用，可以较方便<％@LANGUAGE="VBSCRIPT&
- 现在IE7已经推出一段时间并且渗透到用户当中，不用等太久我们就可以在页面上使用更高级的CSS。两个最有用的项目将是 Child子和Adjac
- 在IE下测试，发现最大值是：18014398509481984（0x40000000000000）另外发现一个奇怪的问题：JS世界居然不存在
- 我们经常会遇到多重查询问题，而长长的SQL语句往往让人丈二和尚摸不着头脑。特别是客户端部分填入查询条件时，如用普通方法将更是难上加难。以下巧
- 很多现代的浏览器在地址栏的右边有个搜索框，默认的安装有 Google 搜索等。如下图所示： 其实这是 OpenSearch 的一
- asp如何显示全部的环境变量？<％@Language="VBScript"％><％dim H
- 大家知道直接使用ASP是不能够重启服务器的，这时我们需要制作一个组件来实现功能，ASP通过这个组件调用系统API，然后按照不同的重启和关机方
- 如何实现优惠打折？ 代码及说明见下：<％@ LANG
