jquery 实现文字闪动效果

最新推荐文章于 2023-05-25 16:13:52 发布

miyacnn

最新推荐文章于 2023-05-25 16:13:52 发布

阅读量622

点赞数 1

分类专栏： jQuery JavaScript web前端技术文章标签： jquery 闪动定时器 ViewUI

web前端技术同时被 3 个专栏收录

58 篇文章 0 订阅

订阅专栏

JavaScript

53 篇文章 0 订阅

订阅专栏

jQuery

15 篇文章 0 订阅

订阅专栏

有个项目，之前添加记事成功是弹出一个提示框提示，添加成功，产品经理觉得这样不是很友好，但是不提示又不知道是不是添加成功，又不知道明确知道当前添加的是哪一条，所以：想让添加的当条信息闪动几下，然后停止。就OK

下面就来说说实现的原理：

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="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script> 
  function shake(element,className,times){
      var i = 0,
          t = false ,
          o = element.attr("class"),
          c = "",
          times = 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);
					}
				}
			);