实现文字闪烁效果

来源：互联网发布：linux环境搭建编辑：程序博客网时间：2024/04/29 18:54
<!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>
0 0