js实现按钮颜色渐变动画效果


Posted in Javascript onAugust 20, 2015

本文实例讲述了js实现按钮颜色渐变动画效果的方法。分享给大家供大家参考。具体如下:

这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法。

运行效果截图如下:

js实现按钮颜色渐变动画效果

在线演示地址如下:

具体代码如下:

<HTML><HEAD><TITLE>按钮慢慢变色</TITLE>
<STYLE type=text/css>
BODY {
 MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
A {
 FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none
}
A:hover {
 FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: red; TEXT-DECORATION: underline
}
A:active {
 FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
}
.STYLE1 {
 color: #000099;
 font-weight: bold;
 font-family: "华文新魏";
 font-size: 30px;
}
.STYLE2 {
 color: #FF3399;
 font-size: 40px;
 font-family: "华文行楷";
}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9>
<CENTER>
 <span class="STYLE2">按钮慢慢变色</span>
</CENTER><BR>
<CENTER>
<TABLE borderColor=#66FF00 border=5 borderlight="green">
 <TBODY>
 <TR>
 <TD align=middle><span class="STYLE1">效果显示</span></TD>
 </TR>
 <TR>
 <TD align=middle>
  <SCRIPT language=JavaScript>
hexColor = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
function mOver() {
for (i = 0; i < 13; i++) {
setTimeout('document.myForm.button.style.background = "#'+hexColor[12-i]+'0'+hexColor[12-i]+'0c0";', i * 40);
 }
}
function mOut() {
document.myForm.button.value = "进入三水点靠木";
for (i = 0; i < 12; i++) {
setTimeout('document.myForm.button.style.background = "#'+hexColor[i]+'0'+hexColor[i]+'0c0";', i * 40);
 }
}
// End -->
</SCRIPT>
  <FORM name=myForm>
  <input onMouseDown='document.myForm.button.value=" 谢谢"' onMouseOver=mOver() onClick='window.location="https://3water.com/"' onMouseOut=mOut() type=button value=鼠标放在上面 name=button >
  </FORM></TD></TR></TBODY></TABLE>
</CENTER>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 #Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 #Javascript
jQuery超赞的评分插件(8款)
Aug 20 #Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 #Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 #Javascript
js实现文字在按钮上滚动的方法
Aug 20 #Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 #Javascript
You might like
浅谈php命令行用法
2015/02/04 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
详解vue-cli 接口代理配置
2017/12/13 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
python3中for循环踩过的坑记录
2020/12/14 Python
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
电大自我鉴定范文
2013/10/01 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
教师实习自我鉴定
2013/12/14 职场文书
商务日语专业自荐信
2014/04/17 职场文书
加入学生会演讲稿
2014/04/24 职场文书
社团活动总结报告
2014/06/27 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
企业务虚会发言材料
2014/10/20 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS