您的位置：首页 > 其它

实现文字闪烁效果

2015-03-09 17:42 337 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航