实现文字闪烁效果

最新推荐文章于 2023-05-29 15:45:02 发布

colorsunlight_110

最新推荐文章于 2023-05-29 15:45:02 发布

阅读量980

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/colorsunlight/article/details/44157587

版权

jQuery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../public/js/jquery-1.8.3.js"></script>
<title>打开新页面</title>
<style type="text/css">
.cssFlash{
  color: blue;
}
.cssFlashred{
  color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    function textFlash(obj/*jQuery Object*/,cssName/*Css 样式名称*/,times/*闪烁次数*/){
        var i=0,t=false,o=obj.attr("class")+"",c="",times=times||2;
        if(t)return;
        t=setInterval(function(){//实现闪烁功能
            i++;
            c=i%2?o+cssName:o;
            obj.attr("class",c);
            /* if(i==2*times){
                clearInterval(t);
                obj.removeClass(c);
            } */
        }, 200);
    }
        $(function(){
            textFlash($("#auto"), "red", 3);
            $("#click").bind("click",function(){
                textFlash($(this), "red", 3);
                return false;
            })
            $("#email").blur(function(){
                if(/^\w+([-+.]\w)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($(this).val())){
                    textFlash($(this), "red", 3);
                }
            })
        })

})
</script>
</head>
<body>
    <div class="main">
        <div id="auto" class="cssFlash">文本自动闪动</div>
        <div id="click" class="cssFlash">单击文本闪动</div>
        <input class="cssFlash" type="email" id="email" placeholer="如果输入email地址会闪动"/>
    </div>
</body>
</html>

colorsunlight_110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现文字闪烁效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="../
复制链接

扫一扫