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 相关文章推荐
jQuery autocomplete插件修改
Apr 17 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
jQuery中的select操作详解
Nov 29 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 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 调试利器debug_print_backtrace()
2012/07/23 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
php 数据结构之链表队列
2017/10/17 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
js实现简易ATM功能
2020/10/27 Javascript
详解Python中DOM方法的动态性
2015/04/11 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python正则实现提取电话功能
2018/02/24 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
简历中的自我评价怎么写
2014/01/29 职场文书
小学毕业感言150字
2014/02/05 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书