jQuery实现仿QQ头像闪烁效果的文字闪动提示代码


Posted in Javascript onNovember 03, 2015

本文实例讲述了jQuery实现仿QQ头像闪烁效果的文字闪动提示代码。分享给大家供大家参考,具体如下:

jQuery 闪动的文字提示,仿QQ头像闪烁闪动提示,可以用于错误提示或其他吸引用户注意力的场合。

shake(ele,cls,times)
ele : jQuery Object [object] 要闪动的元素
cls : Class Name [string] 闪动的类
times : Number [Number] 闪动几次

注意,必须调用jQuery1.4.2及以上版本,否则网页下角会提示错误。

运行效果截图如下:

jQuery实现仿QQ头像闪烁效果的文字闪动提示代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>QSL 社区闪动提示</title>
<style> 
 *{ margin:0; padding:0;}
 body{ background:#fff; font-family:Arial, Helvetica, sans-serif; background:#f9f9f9; font-size:14px; color:#333;}
 .main{ width:600px; background:#fff; margin:0 auto; padding:20px 0; border:solid #ddd; border-width:0 1px; min-height:800px;}
 .box{ width:240px; height:26px; line-height:26px; background:#f0f0f0; border:1px solid #ddd; text-align:center; font-size:14px; margin:20px auto;}
 input.box{ width:240px; font-weight:900; color:#999; display:block; background:#fff; text-align:left;}
 .red{ border:1px solid #d00; background:#ffe9e8; color:#d00;}
 input.red{background:#ffe9e8;}
 #box1{ cursor:pointer;}
 .des{ margin:0 20px; padding:6px; line-height:20px; border:1px solid #ccc; color:#555;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script> 
 function shake(ele,cls,times){
   var i = 0,t= false ,o =ele.attr("class")+" ",c ="",times=times||2;
   if(t) return;
   t= setInterval(function(){
    i++;
    c = i%2 ? o+cls : o;
    ele.attr("class",c);
    if(i==2*times){
     clearInterval(t);
     ele.removeClass(cls);
     }
    },200);
   };
 $(function(){
  //domready 就闪动
  shake($("#box"),"red",3);
  //点击闪动
  $("#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);
     }
    }
   );
  });
</script>
</head>
 <body>
 <div class="main">
 <p class="des">闪动提示,可以用于错误提示或其他吸引用户注意力的场合 <br>
 shake(ele,cls,times)<br>
 ele : jQuery Object [object] 要闪动的元素<br>
 cls : Class Name [string] 闪动的类<br>
 times : Number [Number] 闪动几次
 </p>
<div id="box" class="box">打开就闪动</div><div id="box1" class="box">点击就闪动</div>
<input class="box" type="email" id="mail" placeholder="不是email地址就闪动" /> 
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
jquery cookie的用法总结
Nov 18 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 #Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 #Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 #Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 #Javascript
jQuery实用技巧必备(中)
Nov 03 #Javascript
jQuery实用技巧必备(上)
Nov 02 #Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 #Javascript
You might like
需要发散思维学习PHP
2009/06/29 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
jquery获取radio值实例
2014/10/16 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
原生JS轮播图插件
2017/02/09 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python接口开发实现步骤详解
2020/04/26 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
机械专业应届生求职信
2013/12/12 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
企业理念标语
2014/06/09 职场文书
社区文艺活动方案
2014/08/19 职场文书
爱国影片观后感
2015/06/18 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers