[转] 鼠标移入/移出颜色渐变
2013-10-09 11:18
489 查看
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>鼠标移入/移出颜色渐变</title> <style> ul, li{ margin:0; padding:0; } #link{ width:150px; height:150px; padding:10px; list-style:none; background:#B7B7B7; font:14px/1.5 Arial; } #link a{ color:#0F0; text-decoration:none; } </style> <script> window.onload = function() { var aLink = document.getElementById("link").getElementsByTagName("a"); var cfg = { beginColor:0x00FF00,//十六进制,字体开始的色 endColor:0xFF00FF,//十六进制,字体结束的色 duration:10//时长 }; for(var len = aLink.length; len--;) { aLink[len].onmouseover = function() { setColor(this, 0) }; aLink[len].onmouseout = function() { setColor(this, cfg.duration) }; } function setColor(obj, num) { clearInterval(obj.timer); var i = num; obj.timer = setInterval(function() { obj.style.color = getColor(i) num ? i-- : i++; if(i < 0 || i > cfg.duration) clearInterval(obj.timer) }, 30) } function getColor(i) { var br = Math.floor(cfg.beginColor/(256*256)), bg = Math.floor((cfg.beginColor%(256*256))/256), bb = Math.floor(cfg.beginColor%256), er = Math.floor(cfg.endColor/(256*256)), eg = Math.floor((cfg.endColor%(256*256))/256), eb = Math.floor(cfg.endColor%256), r = br+(er-br)*i/cfg.duration, g = bg+(eg-bg)*i/cfg.duration, b = bb+(eb-bb)*i/cfg.duration, re="#" + toHex(r)+toHex(g)+toHex(b); //console.log(re); return re; } function toHex(n) { n = Math.round(n); n = (n.toString(16).length<2 ? "0"+n.toString(16) : n.toString(16)).toUpperCase(); return n; } } </script> </head> <body> <ul id="link"> <li><a href="javascript:;">CYCLING</a></li> <li><a href="javascript:;">INLINE</a></li> <li><a href="javascript:;">QUAD</a></li> <li><a href="javascript:;">SHORT TRACK</a></li> <li><a href="javascript:;">LONG TRACK</a></li> </ul> </body> </html>
相关文章推荐
- 使用户打不开任务管理器
- Lync Server的环境搭建(五):Lync-Server的安装部署
- const指针举例
- cocos2d-x 2.0 包含box2d编译android
- 【iOS-Cocos2d游戏开发之四】独自收集Cocos2d提供的字体!共57种(有对照的字体图)
- 让linux2.6.24内核在开发板支持usb鼠标
- void*的用法
- Weka学习之预处理连接MySql(二)
- C#线程同步(3)- 互斥量 Mutex
- phpcms二次开发步骤
- 批量删除ASP.NET中的缓存(cache)
- python 相关安装和配置
- nuc501 adpcm问题
- ubuntu输入用户名密码后无法进入图形界面
- 在 UEFI 模式下安装 ESXi 后主机无法引导
- SQL Server的I / O基础--2
- FCKeditor工具栏设置、自动换行、换行间距 的解决办法
- IT公司面试手册
- springMVC基础上的hibernate与c3p0整合案例
- js获取鼠标相对于整个文档的位置