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 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
php ios推送(代码)
2013/07/01 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
js实现简易ATM功能
2020/10/27 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
python实现上传下载文件功能
2020/11/19 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
python读写csv文件实例代码
2019/07/05 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
个人培训自我鉴定
2014/03/28 职场文书
安全生产管理责任书
2014/04/16 职场文书
公积金具结保证书
2015/05/11 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
《雷雨》教学反思
2016/02/20 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL