html鼠标文字渐变效果,JS实现文字链接感应鼠标淡入淡出改变颜色的方法
本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法。分享给大家供大家参考。具体实现方法如下:
JS实现文字链接感应鼠标淡入淡出改变颜色
startColor = "#671700"; // 定义链接颜色
endColor = "#D8D1C5"; // 定义要渐变到最后的颜色
stepIn = 17;
stepOut = 23;
/*
定义是否让所有的文本链接自动渐变,true为是,false为否
*/
autoFade = true;
/*
在这里定义css样式里的类class:fade,如果为true,那么你要将要渐变的链接上加上此fade样式
*/
sloppyClass = false;
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
document.onmouseover = domouseover;
document.onmouseout = domouseout;
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}
function domouseover() {
if(document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}
function domouseout() {
if (document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut);
}
}
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}
function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}
function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];
if (fadeId[0] != null && fade[0] != element){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
i++;
}
}
for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
}
fadeId[0] = element;
}
鼠标放在此文字链接上查看预览效果
希望本文所述对大家的javascript程序设计有所帮助。
html鼠标文字渐变效果,JS实现文字链接感应鼠标淡入淡出改变颜色的方法相关推荐
- 01.Python输出文字改变颜色的方法
# Python输出文字改变颜色的方法 一.使用注释性输出 (一).基本语法 \033[显示方式; 前景色; 背景色m******\033[0m 显示方式.前景色.背景色都为可选参数,选择自己需要的即 ...
- html表格鼠标高亮行列,JS实现的表格行鼠标点击高亮效果代码
本文实例讲述了JS实现的表格行鼠标点击高亮效果代码.分享给大家供大家参考,具体如下: 偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效) var high ...
- linux 终端 渐变色,iOS开发——UI篇文字渐变效果:图层中的mask属性
本次文章,主要讲述的是图层中的mask属性,利用它,可以做出文字渐变效果! 一.文字渐变效果: 二.文字渐变实现思路: 1.创建一个颜色渐变层,渐变图层跟文字控件一样大. 2.用文字图层裁剪渐变层,只 ...
- html渐变不兼容,CSS3实现文字渐变效果,兼容性最强系列!
背景渐变色,多重渐变背景色,在前端领域的使用越来越常见,以及前段时间分享的<CSS多姿多彩的渐变色,前端还需要PS吗?>,通过css就可以制作漂亮的渐变色卡,让前端不再依靠图片实现复杂的效 ...
- iOS实现文字渐变效果
2019独角兽企业重金招聘Python工程师标准>>> 一.文字渐变效果: 二.文字渐变实现思路: 1.创建一个颜色渐变层,渐变图层跟文字控件一样大. 2.用文字图层裁剪渐变层,只保 ...
- php按钮鼠标感应就变色,JavaScript_JS实现网页滚动条感应鼠标变色的方法,本文实例讲述了JS实现网页滚 - phpStudy...
JS实现网页滚动条感应鼠标变色的方法 本文实例讲述了JS实现网页滚动条感应鼠标变色的方法.分享给大家供大家参考.具体实现方法如下: JS实现网页滚动条感应鼠标变色 把你的目光转向右侧的滚动条看一下吧? ...
- html 鼠标经过出现文字,CSS实现鼠标滑过文字弹出一段说明文字无JS代码
用css实现内容弹出,无js代码,下面代码直接拷贝了就可用, 需要背景图的到下面的地址下载,谢谢! 地址:http://download.csdn.net/detail/zurich1979/7229 ...
- php渐变字,jQuery_jQuery实现的立体文字渐变效果,先截两个图看看: 效果很 - phpStudy...
jQuery实现的立体文字渐变效果 先截两个图看看: 效果很不错吧?会不会误以为这些字体是图片?这可不是图片,而是用JS实现的 在线演示 http://demo.phpstudy.net/js/gra ...
- 基于PaddleOCR开发Auto.js Pro文字识别插件
目录 目的 准备工作 插件开发 1.项目结构对比 2.插件SDK集成 3.调整assets资源 4.删除无用的Activity文件 5.修改AndroidManifest.xml 6.修改Predic ...
最新文章
- 【转】c#委托与事件
- python开发环境spyder_spyder python 2.7-spyder(Python开发环境)下载 v2.1.10官方版--pc6下载站...
- 一个空值_java匠人手法优雅的处理空值
- “成长”必经之路:越努力越幸运
- C#LeetCode刷题之#724-寻找数组的中心索引( Find Pivot Index)
- 计算机视觉基础-图像处理(图像滤波)cpp+python
- 小数点进位 oracle,使用多个小数点(。)对Oracle中的记录进行排序
- openpyxl 简单使用
- c4d和3dmax建模哪个好?
- 图像的数字化(以某化探异常图为例——地球物理)
- 移动端UI设计尺寸规范以及iPhone尺寸大小
- 泛泰A870L/K/S第三版官方4.4.2原来的系统卡刷机包 (愿自己主动ROOT)
- C++(4)——对称/旋转
- RGB-D SLAM in Dynamic Environments Using Static Point Weighting论文笔记
- 数据库系统概论(第5版)王珊 详细知识清单 期末复习速成 考前冲刺 面试——(第一篇 基础篇)
- 关于高性能的MIMO技术的实现方法介绍
- Android Notification 详解——基本操作
- 同轴电缆传输容易出现哪些干扰?
- 角度,弧度,三角函数
- 心电图实验(使用vivado进行编程,VHDL语言)
热门文章
- 艾永亮:一家面包店是怎么干掉星巴克的?
- 双系统电脑跳过系统选择界面操作步骤
- 前端文件下载的打开方式
- Java教程:Java运算符优先级
- 招行U-BANK怎么导出对账单和电子回单?
- matlab两点间的球面距离,用MATLAB求点到椭球面距离已知如图a、b和点的位置,求点到球面的距离。最好是用MATLAB的。谢谢~...
- 程序员的数学【微积分基础】
- godaddy长期有效的优惠码,每单优惠1美金,无金额限制。
- C++智能指针:更简单、更高效的内存管理方法
- Linux命令--more(查看日志文件内容,排查问题)