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 相关文章推荐
js局部刷新页面时间具体实现
Jul 04 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
vue总线机制(bus)知识点详解
May 10 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取进制余数函数代码
2012/01/19 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
PHP代码加密的方法总结
2020/03/13 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python logging模块学习笔记
2014/05/24 Python
Python3基础之输入和输出实例分析
2014/08/18 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
数控专业大学生的自我鉴定
2013/11/13 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
团队拓展活动方案
2014/08/28 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书