html+css+jq鼠标滑过文字彩色变色特效
html+css+jq鼠标滑过文字彩色变色特效
新建html文档。
书写hmtl代码。
书写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 }
.clear { clear: both }
.demo { width: 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; }
书写并添加js代码。
$(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 + '' + text.charAt(i) + ''
}
return colorized
}
代码整体结构。
查看效果。
版权声明:本站【趣百科】文章素材来源于网络或者用户投稿,未经许可不得用于商用,如转载保留本文链接:https://www.qubaik.com/article/147226.html