JS实现文字链接感应鼠标淡入淡出改变颜色的方法


Posted in Javascript onFebruary 26, 2015

本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>JS实现文字链接感应鼠标淡入淡出改变颜色</TITLE>

</HEAD>

<BODY>

<script language="javascript" type="text/javascript">

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;

}

</script>

<p><a href="https://3water.com">鼠标放在此文字链接上查看预览效果</a></p>

</BODY>

</HTML>

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

Javascript 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
JS实现很酷的水波文字特效实例
Feb 26 #Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 #Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 #Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 #Javascript
使用jQuery获得内容以及内容的属性
Feb 26 #Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 #Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 #Javascript
You might like
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
js读取本地文件的实例
2017/12/22 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
基于Python的接口测试框架实例
2016/11/04 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python unichr函数知识点总结
2020/12/16 Python
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
营销与策划个人求职信
2013/09/22 职场文书
小班开学寄语
2014/04/04 职场文书
《菜园里》教学反思
2014/04/17 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python