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

最新推荐文章于 2022-09-28 23:23:15 发布

xjwolaile

最新推荐文章于 2022-09-28 23:23:15 发布

阅读量365

点赞数

分类专栏： jQuery 前端技术学习文章标签： for return Math floor random

本文链接：https://blog.csdn.net/xjwolaile/article/details/84457911

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

jQuery

63 篇文章 0 订阅

订阅专栏

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、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/8390/60026185-defe-3b65-a9d2-ba7188a29609.jpg[/img]

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>

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery文字特效制作文字鼠标滑过多彩色变色显示-20130711

1、效果及功能说明文字特效制作文字鼠标滑过变色多彩色效果显示，颜色随机匹配变色显示，酷炫效果 2、实现原理先设定好需要变化的几种颜色然后通过改变背景颜色的方法将不同的颜色匹配到不同的文字上去在创建一个伪类让得触发这个变化字体颜色的方法和取消主要的方法[code="html5"].bind("mouseleave", function()就是修改背景颜...
复制链接

扫一扫