• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

[jQuery]彩色链接

JavaScript 水墨上仙 1422次浏览

[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>


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明[jQuery]彩色链接
喜欢 (0)
加载中……