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

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

按钮慢慢变色

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: "华文行楷";

}

按钮慢慢变色

效果显示

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 -->

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

html 颜色渐变动画效果,js实现按钮颜色渐变动画效果相关推荐

html实现类似app的欢迎页,css3动画代替js脚本实现欢迎页面动画
1.使用脚本操作dom元素在页面加载时,使用js控制dom的animationsetTimeout(function() { $('.welcome').fadeOut(1000) }, 5000) ...
android开发按钮颜色,Android编程实现简单设置按钮颜色的方法
本文实例讲述了Android编程实现简单设置按钮颜色的方法.分享给大家供大家参考,具体如下: 1.工程目录 a.在res目录-新建drawble文件夹放入自定义图片 2.main.xml androi ...
html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法
本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 鼠标触发图片抖动效果 .shakeimage{ position:relative } //configur ...
android代码设置弹窗颜色,Android编程实现简单设置按钮颜色的方法
本文实例讲述了Android编程实现简单设置按钮颜色的方法.分享给大家供大家参考,具体如下: 1.工程目录 a.在res目录-新建drawble文件夹放入自定义图片 2.main.xml androi ...
android 按钮顶级效果_Android 中按钮的点击效果
Android 中按钮点击后的效果通常是通过更换图片,或者背景色来实现的. 之前做的一直都是手动写在点击事件里,今天发现了一种更合适的方法,写在xml文件中. 比如,我有两张图片,一张是点击前的bef ...
html中图片鼠标滑动的效果,JS DOM实现鼠标滑动图片效果
经常,我们在浏览各种网页的时候,都会有各种动画效果展示,像下图所示的是很多网上商城常用的货品展示方式,同类的货品并排展现在窗口上,用户如果看中了哪一款商品想要查看详情的话,只要将鼠标放上该商品的区域, ...
python tkinter button颜色变不了_tkinter多按钮颜色变化
我使用tkinter创建一个8x8按钮矩阵,当按下单个按钮时,它会添加到最终列表中(例如finalList=((0,0),(5,7),(6,6),-),允许我快速创建8x8(x,y)坐标图像.我已经创 ...
marquee实现文字移动效果;js+div实现文字无缝移动效果
1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...
html轮播图京东效果,js实现京东轮播图效果
Title body,ul,li{padding:0;margin:0;} li{list-style-type:none;} .wrap{ position:relative; width:480p ...
html好看的渐变效果,CSS3实现渐变/立体/扁平的漂亮按钮
网页UI设计追求精美漂亮,除此之外,实现代码也越趋于简单易用.本文就介绍如何用CSS3实现渐变/立体/扁平的漂亮按钮,代码简单易用,但是效果却是十分之好. CSS3实现渐变/立体/扁平的漂亮按钮按钮 ...

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

html 颜色渐变动画效果,js实现按钮颜色渐变动画效果相关推荐

最新文章

热门文章