如何用jquery实现闪烁文字效果
- coldplay.xixi原创
- 2020-12-07 10:40:362538浏览
用jquery实现闪烁文字效果的方法：首先获取到最新一条记事的pid，并在添加成功后来闪动这条记事；然后闪动的方法可以写到函数里，直接调用；最后有闪动就要有定时器，开启定时器即可。
本教程操作环境：windows7系统、jquery3.2.1版本，Dell G3电脑。
推荐：jquery视频教程
用jquery实现闪烁文字效果的方法：
1，先要获取到最新一条记事的pid，这个pid可以是后台给你接口中返回的值。
2，在添加成功后来闪动这条记事，
3，闪动的方法可以写到函数里，直接调用。
4，有闪动就要有定时器，开启定时器就要关闭定时器。
例子，在页面打开的时候闪动。
代码示例:
<!DOCTYPE HTML>
<html>
<head>
<title>闪动提示</title>
<style>
*{ margin:0; padding:0;}
.box{color: #000}
.red{color:#d00;}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script>
function shake(element,className,times){
var i = 0,
t = false ,
o = element.attr("class"),
c = "",
timestimes = times||2;
if(t) return;
t = setInterval(function(){
i++;
c = i%2 ? o + ' ' + className : o;
element.attr("class",c);
if(i==2*times){
clearInterval(t);
element.removeClass(className);
}
},200);
};
$(function(){
//domready 就闪动
shake($(".box"),"red",3);
});
</script>
</head>
<body>
<div class="box">打开就闪动</div>
</body>
</html>以下代码在提示两种点击闪动，和不同校验闪动，如form表单输入错误的闪动。
代码示例:
//点击闪动
$("#box1").bind({
click:function(){
shake($(this),"red",3);
return false;
}
});
//通不过mail校验闪动
$("#mail").blur(
function(){
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($(this).val())) {
shake($(this),"red",3);
}
}
);相关学习推荐：javascript视频教程
以上是如何用jquery实现闪烁文字效果的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn