<!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>
//javascript/1071