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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
js实现tab切换效果实例
Sep 16 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
webpack中如何加载静态文件的方法步骤
May 18 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
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
js的三种继承方式详解
2017/01/21 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python 下载及安装详细步骤
2019/11/04 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
运动会解说词200字
2014/02/06 职场文书
感恩的演讲稿
2014/05/06 职场文书
环保倡议书100字
2014/05/15 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL