js文字闪烁效果

最新推荐文章于 2023-07-18 08:29:46 发布

蜡笔0319

最新推荐文章于 2023-07-18 08:29:46 发布

阅读量1.1k

点赞数 1

分类专栏： html

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 文字显示</title>
</head>
<style>
.table-list-warp .tab-all tbody td {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #666666;
    color: #333333;
    padding: 4px;
    text-align: center;
    vertical-align: middle;
}
</style>
<script src="${ctxStatic}/qt/js/jquery.1.7.2.min.js"></script>
<body>
    <div class="table-list-warp">
        <table class="tab-all">
            <tbody>
                <tr>
                    <td><a id="step_6_2_1_but" href="javascript:void(0);" class="ai_m py_b" style="font-size: 18px;">jquery 文字闪烁显示</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        $(function(){
            function init(){
                $('#step_6_2_1_but').trigger("mouseenter");
            }
            var colors = ["#0000FF","#FF1493","#228B22","#FFFF00"];
            var colorsLength = colors.length;
            var aimRun = function( aim ){
                if ( aim == null ){
                    clearInterval( aimInterval );
                     return;
                 }
                
                var idx = 0;
                var o = false;
                aimInterval = setInterval(function(){
                    aim.css({color:colors[idx]});
                    o = o ? !(--idx < 1): ++idx + 1 > colorsLength  ;
                },100);
            };
            
            $(".ai_m").on("mouseenter", function(){
                aimRun($(this));
            });
            
            init();
        });
        
    </script>
</body>
</html>

转自：http://blog.csdn.net/wangxinqiang1129/article/details/8767238