如何用jquery实现闪烁文字效果?

使用jquery实现闪烁文字:

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

实现方法介绍:

为文字定义两个不同的css样式,然后使用jquery方法替换使用这两个css样式即可实现文字闪烁效果。

更多相关知识请关注前端学习网站

以上就是如何用jquery实现闪烁文字效果?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏