jQuery 打造动态渐变按钮 详细图文教程


Posted in Javascript onApril 25, 2010

本教程分为以下三步:

Step1 - Photoshop

Step2 - HTML/CSS

Step3 - JavaScript(jQuery)

Step4 - CSS修改

 

最终结果如下:

jQuery 打造动态渐变按钮 详细图文教程

Step1 - Photoshop

1. 新建文件

按钮的尺寸是100px X 80px,但由于我们需要创建一个有两种状态的CSS sprite背景图,所以我们在Photoshop中创建(Ctrl+N)一个长宽为200px X 160px的图片文件,如下图:

jQuery 打造动态渐变按钮 详细图文教程

2. 创建参考线

为了使绘制按钮更容易,我们创建参考线,从标尺中拉出参考线,如果你找不到标尺,可以按Ctrl+R显示,如下图:

jQuery 打造动态渐变按钮 详细图文教程

3. 绘制形状

选择工具面板中的矩形工具,设置圆角半径为10px,在画布上绘制形状,如下图:

jQuery 打造动态渐变按钮 详细图文教程

4. 设置形状样式

接上图最后一步,双击层,打开图层样式窗口,设置形状的样式,首先选择渐变叠加,设置渐变颜色从#3d3d3d到#8b8b8b,如下图:

jQuery 打造动态渐变按钮 详细图文教程

然后,选择“内发光”,设置混合模式为“正常”,不透明度为100%,颜色设置为#ffffff,图素大小设置为3像素,如下图:

jQuery 打造动态渐变按钮 详细图文教程

之后,再选择“描边”,设置大小为1像素,位置为“内部”,颜色为黑色#000000,如下图:

jQuery 打造动态渐变按钮 详细图文教程

5. 添加字体

输入文本,设置文字相对水平和垂直居中,字体为方正准圆简体,字号36点,加粗平滑,颜色为白色(#FFFFFF),如下图:

jQuery 打造动态渐变按钮 详细图文教程

6. 设置字体样式

同样的双击文字图层,打开文字图层样式,设置字体样式,点击“投影”,设置混合模式为“正常”,颜色为#3e3e3e,不透明度为100%,角度为90度,距离为1像素,大小为2像素;点击“内阴影”,设置混合模式为“正常”,颜色为#454545,不透明度为75%,角度为90度,距离为1像素,大小为2像素,如下图所示:

jQuery 打造动态渐变按钮 详细图文教程

至此,我们就完成链接状态下的按钮背景图,效果如下:

jQuery 打造动态渐变按钮 详细图文教程

7. 悬停背景图

制作鼠标悬停状态下的按钮背景图,把图层放入组内,复制组,移动,并重命名,如下图:

jQuery 打造动态渐变按钮 详细图文教程

8.背景图属性

修改hover背景图的样式属性,打开背景图的图层样式窗口,选择“描边”,修改边框颜色为#004d77;选择“渐变叠加”,修改渐变从#1671a3到#5baedc,如下图:

 

jQuery 打造动态渐变按钮 详细图文教程

9. 设置字体样式

打开字体图层样式,选择“投影”,修改投影颜色为#207aad;选择“内阴影”,修改字体颜色为#0d4f74,如下图:

jQuery 打造动态渐变按钮 详细图文教程

10. 图层半透明

添加图层半透明效果,按以上步骤修改,鼠标悬停背景图如下,最后是再加上一层半透明层,先添加一个200px X 40px的白色层,置顶并设置白色层的透明度为10%,如下图:

jQuery 打造动态渐变按钮 详细图文教程

最后,我们完成的CSS sprite背景图如下,您也可以点击下载PSD文件。

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加载完成后修改成为:

view sourceprint?<a class=”button”><span class=”hover”>前端档案</span></a>

<span>元素在鼠标悬停前是全透明的,鼠标经过时,逐渐不透明,以达到渐变的效果,动画过程如下图:

jQuery 打造动态渐变按钮 详细图文教程

通过以上分析,我们可以写出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。
Step4 - CSS修改

在纯CSS效果的示例中,我们是利用:hover伪类来实现sprite图片的切换,当我们使用jQuery后,是引入一个<span>层作为鼠标经过时背景图,所以CSS需要做如下修改:

/*之前的按钮悬停样式*/ 
.button:hover{ 
background:url(bg_button.gif) bottom no-repeat; 
}

修改为
/*不需要在设置:hover的样式,而是设置span.hover的样式*/ 
.button span.hover { 
/*注意要使用绝对定位*/ 
position: absolute; 
display: block; 
width:200px; 
height:80px; 
background:url(bg_button.gif) bottom no-repeat; 
text-indent:-9999px; 
}

总结

以上我们按4个步骤实现了一个动态渐变按钮,在演示中,我还提供了一个扩展示例,您可以跟着自己实现一个,也可以下载源代码修改定制,当然,您有什么好的提议或者有什么问题,欢迎给我留言。
演示地址 http://demo.3water.com/js/gcb_download/gradual-change-button.html
下载地址 http://demo.3water.com/js/gcb_download/gcb_download.rar

Javascript 相关文章推荐
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
JS回调函数深入理解
Oct 16 Javascript
javascript之学会吝啬 精简代码
Apr 25 #Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 #Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 #Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 #Javascript
js 内存释放问题
Apr 25 #Javascript
JavaScript 对象链式操作测试代码
Apr 25 #Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 #Javascript
You might like
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Python中安装easy_install的方法
2018/11/18 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
深入了解Python在HDA中的应用
2019/09/05 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
大学生自我鉴定
2013/12/16 职场文书
事假请假条范文
2014/04/11 职场文书
采购部长岗位职责
2014/06/13 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
活动总结格式
2014/08/30 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript