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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 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 XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP二维数组去重算法
2016/12/17 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python3.6简单反射操作示例
2018/06/14 Python
python and or用法详解
2019/06/26 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
分公司经理岗位职责
2013/11/11 职场文书
开学寄语大全
2014/04/08 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
促销活动总结范文
2014/04/30 职场文书
银行求职自荐书
2014/06/25 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
学生犯错保证书
2015/05/09 职场文书
2015年暑假生活总结
2015/07/13 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
村官2015年度工作总结
2015/10/14 职场文书
《西门豹》教学反思
2016/02/23 职场文书