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浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
JS实现网页时钟特效
Mar 25 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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
一个查看session内容的函数
2006/10/09 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
javascript自执行函数
2017/02/10 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Python语言生成水仙花数代码示例
2017/12/18 Python
Python3数字求和的实例
2019/02/19 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
python with (as)语句实例详解
2020/02/04 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
2015年清明节演讲稿范文
2015/03/17 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python