<!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文字特效制作文字鼠标滑过多彩色变色显示的更多相关文章

  1. 9种CSS3 blend模式制作的鼠标滑过图片标题特效

    这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效.该图片标题特效在鼠标滑过一张图片的时候,图片的标题会对应的动画,而且图片会使用css blend模式渲染为很 ...

  2. CSS3火焰文字特效制作教程

    原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...

  3. javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果

    1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 7 ...

  4. jQuery 小特效【文本框折叠隐藏，展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  5. 鼠标滑过切换div显示（鼠标事件）

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  7. 7款震撼人心的HTML5CSS3文字特效

    1.HTML5像素文字爆炸重组动画特效 今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式 ...

  8. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

  9. 简单做出HTML5翻页效果文字特效

    之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transfor ...

随机推荐

  1. Linux安装卸载查看vsftpd

    Linux & vsftpd 相关的命令: 查看---rpm -qa | grep vsftpd 卸载---rpm -e vsftpd 安装---rpm  -ivh /media/(在此tab ...

  2. Qt Load and Save PCL/PLY 加载和保存点云

    Qt可以跟VTK和PCL等其他库联合使用,十分强大,下面的代码展示了如何使用Qt联合PCL库来加载和保存PCL/PLY格式的点云: 通过按钮加载点云: void QMainWindow::on_pb_ ...

  3. Hadoop.2.x_HA部署

    一.概念与HA思路 1. 首先Hadoop架构为主从架构(NameNode/DataNode) 2. NameNode管理着文件系统和与维护客户端访问DataNode 3. Hadoop 2.0 之前 ...

  4. python生成器

    eg1: >>> (i*i for i in range(5))<generator object <genexpr> at 0x16b8fa0>>&g ...

  5. Spark Kill Application

    yarn application -kill <applicationId>

  6. hdu Virtual Friends

    这题是一个很简单额并查集的题目,首先第一步是要用map将字符串映射为整型,这样方便后面的处理,然后就是用一个rank[]数组来记录每个朋友圈的人数.之后就是简单的并查集操作了. 这里给出一组测试案例: ...

  7. 打造移动终端的 WebApp（一）：搭建一个舞台

    最近随着 Apple iOS 和 Android 平台的盛行,一个新的名词 WebApp 也逐渐火了起来,这里我也趁着热潮做一个关于 WebApp 系列的学习笔记,分享平时的一些研究以及项目中的经验, ...

  8. IOS第12天(1,UIViewController控制器的创建的 三种方式，和第一个view创建)

    *************HMAppDelegate.m中 @implementation HMAppDelegate - (BOOL)application:(UIApplication *)app ...

  9. IOS第十天(1:QQ好友列表 ,自定义的headview,代理 ,通知 ,black的使用)

    *****HMViewController.m #import "HMViewController.h" #import "HMFriendsGroupModel.h&q ...

  10. Java封装

    面向对象的三大特征:封装.继承.多态.封装在书面上来说,他无非就是set和get方法罢了.为什么要用到封装,比如买主机如果没有机箱只有内存条.CPU.主板等等那些零件买回到家,你还得一个个的去装那些零 ...