<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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;70em;}
strong{font-weight:bold;}
a:link, a:visited{color:#fff;text-decoration:none;}
a:hover{color:#999; text-decoration:underline}
.clear{clear:both}
/* demo */
.demo{960px;margin:0 auto;}
.demo h1.title{font-weight:normal;font-size:2.6em;border-bottom:2px solid #333;color:#fff;line-height:1.25em;height:54px;}
.demo .link{font-weight:bold;font-size:2em;background:#0a0a0a;padding:1em;display:inline-block;cursor:pointer;_display:inline;zoom:1;/*fuck IE6*/}
.demo .link:hover{text-decoration:none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//定义个在页面加载完成一后可以激活所有函数的方法
$(".colorize").bind("mouseenter", function(){
//定义方法当点击鼠标时当鼠标触及到时，改变背景颜色
$(this).data("text", $(this).text());
//获得所有text里面的数据
$(this).html(colorize($(this).text()));
//获得html所有的text方法
}).bind("mouseleave", function(){
//定鼠标移动触触及时，改变背景颜色
$(this).html($(this).data("text"));
//获得html所有的text方法
});
$(".colorize2").hover(function(){
//定义个伪类方法
$(this).data("text", $(this).text());
//获得text数据
$(this).html(colorize($(this).text()));
//获得html所有text方法
}, function(){
//定义方法
$(this).html($(this).data("text"));
//获得html里面说有的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++) {
//判断i text长度
var index = Math.floor(Math.random()*7)
//定义参数PHP向下舍入为最接近的整数调用PHP方法可返回介于 0 ~ 1 之间的一个随机数
if (text[i] == "(")
//text里面放入i
bracket_color = colors[index]
//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>'
//鼠标触及到下面两行字体后让字体的颜色进行改变一共分别改成7种颜色
}
return colorized
//返回 colorized参数
}
</script>
</head>
<body>
<div class="demo">
<h1 class="title"><a href="http://www.17sucai.com/" title="点击标题查看教程">jQuery链接变色演示</a></h1>
<a class="link colorize" href="http://www.17sucai.com/" title="鼠标放上来也会变色哦">前端观察</a>
<div class="link colorize2" onClick="location.href='http://www.17sucai.com/'">鼠标放上去会变色，嘿嘿！</div>
</div>
</body>
</html>