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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
最简单的jQuery程序 入门者学习
Jul 09 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
提升Python程序运行效率的6个方法
2015/03/31 Python
Python的迭代器和生成器
2015/07/29 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python中的print()输出
2019/04/12 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Python 使用多属性来进行排序
2019/09/01 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
面试后感谢信
2014/02/01 职场文书
新闻发布会策划方案
2014/06/12 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
刑事和解协议书范本
2014/11/19 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
高一化学教学反思
2016/02/22 职场文书
学校运动会开幕词
2016/03/03 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript