标签：style blog http color io os 使用 java ar
这里的传参方法跟本博客中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>
标签：style blog http color io os 使用 java ar
原文地址：http://www.cnblogs.com/bjchenxn/p/3973468.html
