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

最新推荐文章于 2020-07-25 08:20:09 发布

weixin_30478619

最新推荐文章于 2020-07-25 08:20:09 发布

阅读量166

点赞数

文章标签： javascript php 前端 ViewUI

原文链接：http://www.cnblogs.com/turbo12138/p/5564164.html

版权

<!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>

转载于:https://www.cnblogs.com/turbo12138/p/5564164.html

weixin_30478619

关注

0
点赞
踩
0

收藏

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

<!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...
复制链接

扫一扫