首页 > 其他 > 详细

实现文字闪烁效果

时间:2015-03-09 19:10:42      阅读:227      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!