<!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. HDU 1520 树形dp裸题

    1.HDU 1520  Anniversary party 2.总结:第一道树形dp,有点纠结 题意:公司聚会,员工与直接上司不能同时来,求最大权值和 #include<iostream> ...

  2. JAVA生成条形码

    1.下载生成条形码所需要的jar包barcode4j.jar: 2.java生成条形码代码 import java.awt.image.BufferedImage;import java.io.Fil ...

  3. UWP ComboBox下拉选项滚动循环问题

    在UWP开发中遇到个小问题,ComboBox的Item太多的话,列表会重复,并且无限循环,Google了一下后发现这貌似是Metro应用的老问题了,由于ComboBox的Items使用的是Carous ...

  4. css形状大全

    转至:http://blog.sina.com.cn/s/blog_4abb9bba0101acsx.html

  5. JQ写法和js写法 方法函数化

    <script> $(function () { $('#head').click=function () { alert($(this).html()) } }) </script ...

  6. php+curl上传文件

    因为公司项目用java做的,需要我这边用php上传文件.只给了个接口,参数都不明确,然后这边不提交表单,在生成pdf之后就立马上传.用了php+curl,总是没上传成功,这里看到了篇文章http:// ...

  7. Lua迭代器和泛型for

    1.迭代器与closure 在lua中,迭代器通常为函数,每调用一次函数,会返回集合中的下一个元素.每个迭代器在成功调用的时候,都需要保存一些状态,closure(闭包)完美为迭代器运用而生. fun ...

  8. c++ basic 整理2

    ​//拷贝函数 //拷贝构造函数是一种特殊的构造函数,函数的名称必须和类名称一致,它必须的一个参数是本类型的一个引用变量. //不显式指定拷贝函数时,编译器会生成默认拷贝函数. //使用默认拷贝函数 ...

  9. 关于java多线程

    package testSynchronized; /** * * 当使用this也就是该文件中的testclass对象作为对象锁时, * 两个线程都使用该对象锁访问该对象的同步代码块, * 是顺序执 ...

  10. ionic 运用pouchdb/sqlite 数据库做本地存储

    配置数据库环境需要3步: 1.安装slqite插件 在ionic 工程目录对应终端执行一下命令: npm install cordova-plugin-sqlite 2.安装pouchdb 在ioni ...