<!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. js之获取窗口大小和位置信息

    除IE外的浏览器查看窗口大小和位置信息: //The overall size of the browser window on the desktop var windowWidth = windo ...

  2. [慢查优化]慎用MySQL子查询，尤其是看到DEPENDENT SUBQUERY标记时

    案例梳理时间:2013-9-25 写在前面的话: 在慢查优化1和2里都反复强调过 explain 的重要性,但有时候肉眼看不出 explain 结果如何指导优化,这时候还需要有一些其他基础知识的佐助, ...

  3. 在DataGridView控件中加入ComboBox下拉列表框的实现

    在DataGridView控件中加入ComboBox下拉列表框的实现 转自:http://www.cnblogs.com/luqingfei/archive/2007/03/28/691372.htm ...

  4. 30分钟学会使用grunt打包前端代码

    http://www.cnblogs.com/yexiaochai/p/3603389.html

  5. 用CSS设置Table的细边框的最好用的方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 单例 (JAVA)

    java中单例模式是一种常见的设计模式,以下是它的特点: 单例类只能有一个实例. 单例类必须自己创建自己的唯一实例. 单例类必须给所有其他对象提供这一实例 第一种(懒汉,线程不安全):  1 publ ...

  7. mysql中一些简单但是新手容易犯的错误

    一.概述 本人近期使用mysql,由于是新手,常常碰到一些问题,因此,在这里做了一个错误备忘录. 二.错误罗列 1.MySQL 记录不存在时插入 记录存在则更新的实现方法 http://www.cnb ...

  8. android获取系统通讯录

    package com.example.administrator.yunphone.View; import android.app.Fragment; import android.databas ...

  9. Java I/O Basic

    /* 记住每个类相应的用法*/流的分类: io包内定义了所有的流 分类: 方向:输入流.输出流 处理数据单位:字节流.字符流 功能不同:节点流.处理流 所有流类型,位于java.io包内,分别继承以下 ...

  10. zju(2)vivi的配置编译和固化

    1.实验目的 熟悉vivi的知识和应用并使用交叉编译平台vivi引导并烧写到目标板. 二.实验内容 1． 在Ubuntu下配置vivi并进行交叉编译: 2． 将编译好的vivi烧写到目标板上. 三.主 ...