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插件集合
Jan 12 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
python二分法实现实例
2013/11/21 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python协程的用法和例子详解
2017/09/09 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
青安岗事迹材料
2014/05/14 职场文书
创先争优一句话承诺
2014/05/29 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript