[jQuery]彩色链接
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <title>jQuery链接变色 — 前端观察</title> <style type="text/css"> body, div { margin: 0; padding: 0; } html { font-size: 62.5%; height: 100%; background-color: #111; } body { background-color: #111; color: #eee; font: normal 1.25em/1.75em Helvetica, Arial, Verdana, sans-serif; padding: 0; margin: 50px auto; width: 70em; } strong { font-weight: bold; } a:link, a:visited { color: #fff; text-decoration: none; } a:hover { color:#999; text-decoration:underline } h1 { font-weight: normal; font-size: 2.6em; margin: 1em 0; border-bottom: 2px solid #333; color: #fff; line-height: 1.25em; } .demo { font-weight: bold; font-size: 2em; background: #0a0a0a; padding: 1em; display: inline-block; cursor:pointer; _display:inline; zoom:1;/*fuck IE6*/ } a.demo:hover { text-decoration:none; } .clear { clear: both } </style> <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { $(".colorize").bind("mouseenter", function(){ $(this).data("text", $(this).text()); $(this).html(colorize($(this).text())); }).bind("mouseleave", function(){ $(this).html($(this).data("text")); }); $(".colorize2").hover(function(){ $(this).data("text", $(this).text()); $(this).html(colorize($(this).text())); }, function(){ $(this).html($(this).data("text")); }); }) var colors = ["#ff2e99", "#ff8a2d", "#ffe12a", "#caff2a", "#1fb5ff", "#5931ff", "#b848ff"] function colorize(text) { var colorized = "" var bracket_color = "" for (i = 0; i < text.length; i++) { var index = Math.floor(Math.random()*7) if (text[i] == "(") bracket_color = colors[index] color = (bracket_color.length && (text[i] == "(" || text[i] == ")")) ? bracket_color : colors[index] colorized = colorized + '<span style="color: '+color+' !important">' + text.charAt(i) + '</span>' } return colorized } </script> </head> <body> <h1><a href="#" _fcksavedurl="#">jQuery链接变色演示</a></h1> <a class="demo colorize" href="http://www.51xflash.com" _fcksavedurl="http://www.51xflash.com" title="鼠标放上来也会变色哦"> 前端观察</a> <div class="demo colorize2" onClick="location.href='http://www.51xflash.com'">鼠标放 上去会变色,嘿嘿!</div> </body> </html>