Rumah >hujung hadapan web >tutorial js >如何用jquery实现闪烁文字效果
如何用jquery实现闪烁文字效果
- coldplay.xixiasal
- 2020-12-07 10:40:362538semak imbas
用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视频教程
Atas ialah kandungan terperinci 如何用jquery实现闪烁文字效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery中ajax提交数据乱码怎么办Artikel seterusnya：如何使用jquery实现全选和全不选功能