码迷,mamicode.com
首页 > 其他好文 > 详细

实现文字闪烁效果

时间:2015-03-09 19:11:50      阅读:189      评论: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="../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>

实现文字闪烁效果

标签:

原文地址:http://blog.csdn.net/colorsunlight/article/details/44157587

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!