首页 > 代码库 > 鼠标在字体上移动，字体颜色渐变
鼠标在字体上移动，字体颜色渐变
这里的传参方法跟本博客中javascript"鼠标移入移出背景色渐变"中的传参方式相同，我贴的代码是全部都有的，大家可以复制过去直接看效果，有更好的建议的望留言……
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标在字体上移入移出字体颜色渐变</title> <style> *{ margin:0; padding:0; } ul{ margin:10px auto; padding:20px; width:100px; background-color: #B7B7B7; font-size: 20px; } ul li{ list-style-type: none; height:25px; line-height: 25px; text-align: center; } a{ text-decoration: none; color:#fff; } </style></head><body> <ul id="con"> <li><a href="javascript:;">one</a></li> <li><a href="javascript:;">two</a></li> <li><a href="javascript:;">three</a></li> <li><a href="javascript:;">four</a></li> <li><a href="javascript:;">five</a></li> <li><a href="javascript:;">six</a></li> </ul> <script> var links = document.getElementById("con").getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { //这里的传参跟本博客javascript中一个"鼠标渐入渐出背景色变化"中的传参一样，使用临界值 links[i].onmouseover = function(){ changeColor(this,15);//这里很巧秒地将对象传递到函数中，这里的this太漂亮了 } links[i].onmouseout = function(){ changeColor(this,0); } }; function changeColor(obj,color_val){ clearInterval(obj.timer); var i = color_val; obj.timer = setInterval(function(){ color_val ? i-- : i++;//这个或许就是高手的写法，color_val相当于将整数转换为布尔值时的规则 var result = getColor(i); obj.style.color = result; if(i==0||i==15){ clearInterval(obj.timer); } },30); } //将颜色值转变为16进制，这里参考一个16进制颜色表示规则，随着数值的变大颜色越浅 function getColor(color){ var result = ""; for(var i=0;i<3;i++){ result += color.toString(16); } return "#"+result; } </script></body></html>
鼠标在字体上移动，字体颜色渐变
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。