jQuery文字特效制作文字鼠标滑过多彩色变色显示-20130711 -

xjwolaile

浏览: 340500 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery文字特效制作文字鼠标滑过多彩色变色显示-20130711

博客分类：

前端技术
jQuery
学习

for return Math floor random

1、效果及功能说明
文字特效制作文字鼠标滑过变色多彩色效果显示，颜色随机匹配变色显示，酷炫效果

2、实现原理

先设定好需要变化的几种颜色然后通过改变背景颜色的方法将不同的颜色匹配到不同的文字上去在创建一个伪类让得触发这个变化字体颜色的方法和取消

主要的方法

.bind("mouseleave", function()
就是修改背景颜色告诉要修改是什么

$(".colorize2").hover(function()
这段就是如何触发修改通过一个伪类来触发

var colors = ["#ff2e99", "#ff8a2d", "#ffe12a", "#caff2a", "#1fb5ff", "#5931ff", "#b848ff"]
这就是告诉用户触发什么样的效果，7种颜色都用数组装好了

var index = Math.floor(Math.random()*7)
让文字可以随机获得里面的颜色每一个文字获得一种会出现重复

color = (bracket_color.length && (text[i] == "(" || text[i] == ")")) ? bracket_color : colors[index]
        colorized = colorized + '<span style="color: '+color+' !important">' + text.charAt(i) + '</span>'
当鼠标来回以后在两组字之间是，每个字都会发生变化

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(无图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!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;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 */
.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;}
</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>

查看图片附件

分享到：

jQuery段落文字内容高亮显示提示-20130712 | jQuery3D霓虹灯文字效果-20130710

2013-07-11 23:13
浏览 2448
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery文字特效制作文字鼠标滑过多彩色变色显示-20130711

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery文字特效制作文字鼠标滑过多彩色变色显示-20130711

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>