<!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. UITableView常见 UI 问题总结

    一,经历 1.让 group 形式的UITableView的单元格也可以修改separatorStyle属性来设置. 2.修改group形式的UITableView的 cell 之间的间距,可以更改s ...

  2. DataGridView 的单元格的边框、 网格线样式的设定【转】

    1) DataGridView 的边框线样式的设定DataGridView 的边框线的样式是通过 DataGridView.BorderStyle 属性来设定的. BorderStyle 属性设定值是 ...

  3. 用GruntJS合并、压缩JS文件

    为什么要合并.压缩你的JS文件?        一个项目开发完成我们总能发现有一堆js文件非常混乱.           一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加 ...

  4. maven创建web工程，并导入到eclipse中

    maven版本:3.1.0,eclipse版本:4.3 JDK:1.7 创建工程名是sa的maven工程 mvn archetype:create -DgroupId=com.bing-Dartifa ...

  5. 【android studio】解决android studio drawable新建项目时只有一个drawable目录的问题

    概述 android studio默认新建Module时,只新建一个drawable目录,并不会新建适配不同分辨率的drawable目录.但其实,这是可以设置的.有以下两种方法: 方法1 详细步骤 进 ...

  6. [CareerCup] 18.6 Smallest One Million Numbers 最小的一百万个数字

    18.6 Describe an algorithm to find the smallest one million numbers in one billion numbers. Assume t ...

  7. Sqoop_ 从 hive 导到mysql常遇九问题总结(转)

    以前以为版本不同,遇到的问题就不同,后来发现,无论是新版本,还是老版本,遇到的问题大部分都是相同的.下面解决问题的方法仅供借鉴 1.拒绝连接的错误表现是什么?2.表不存在该如何解决?3.null字段填 ...

  8. Js分页插件，支持页面跳转

    这里先给出API: 你只需要提供一个对象涉及以下几项属性,你来设置属性值,通过jq对象链式调用page()以参数形式来加载这个对象,按照参数要求会自动生成分页功能, 参数中pageEvent是可以让你 ...

  9. HDU1058 DP

    Humble Numbers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  10. preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead

    由于方法preg_replace()为PHP 5.5.x 中废弃的特性,官方建议需要在代码中将preg_replace()替换为函数preg_replace_callback,可以问题解决. 具体请见 ...