原文地址：http://www.cnblogs.com/kiter/archive/2013/02/22/2922242.html

声明，本文转自网络。

jQuery 闪动的文字提示，仿QQ头像闪烁闪动提示，可以用于错误提示或其他吸引用户注意力的场合。
shake(ele,cls,times)
ele : jQuery Object [object] 要闪动的元素
cls : Class Name [string] 闪动的类
times : Number [Number] 闪动几次
注意，必须调用jQuery1.4.2及以上版本，否则网页下角会提示错误。

<!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="http://www.codefans.net/ajaxjs/jquery-1.4.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 闪动的文字提示的更多相关文章

  1. jQuery简单纯文字提示条

    如何制作jQuery简单纯文字提示条,先介绍提示条(tooltip)的意思是用户鼠标悬停经过事件发生提示title.它们已经呈现在大多数浏览器中,当你可以提供一个链接或图片的title属性,就是用户将 ...

  2. jquery.autocomplete 搜索文字提示

    function GetJobTitle(obj) { $(obj).autocomplete("GetJobTitle.ashx", { max: 12, //列表里的条目数 m ...

  3. jQuery实现的简单文字提示效果模拟title(转)

    来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...

  4. jQuery图片提示和文字提示

    图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  5. DOM操作在jQuery中的实用------文字提示和图片提示

    关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...

  6. jQuery渐隐渐出的文字提示

    <html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...

  7. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  8. 实现password框中显示文字提示的方式

    其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就 ...

  9. 转 mvc项目中,解决引用jquery文件后智能提示失效的办法

    mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法   这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...

随机推荐

  1. 20165313 《Java程序设计》第六周学习总结

    教材学习总结 一点浅见,不足之处还请谅解. 正则表达式:正则表达式是一个String对象的字符序列,该字符序列中含有具有特殊意义的字符,这些特殊字符称作正则表达式的元字符. 链表:由若干个称作结点的对 ...

  2. 【Jmeter】分布式并发测试

    一.前提: 1.最近在做一下压测,但是单台服务器的CPU,内存可能不够支撑压测的项目,这时候,我们可以使用Jmeter分布式压测. 2.本次使用的环境: 1台服务器做master(调度器) 5台服务器 ...

  3. BZOJ3730 震波 和 BZOJ4372 烁烁的游戏

    "震波"题意 F.A.Qs Home Discuss ProblemSet Status Ranklist Contest 入门OJ ModifyUser  autoint Log ...

  4. 关于 php json float 出现很多位的问题

    关于 php json float 出现很多位的问题 serialize_precision http://php.net/manual/en/ini.list.php https://wiki.ph ...

  5. 20165308 学习基础和C语言基础调查

    学习基础和C语言基础调查 技能学习 我认为给学生具体的, 能实践的, 能马上看到因果关系的教材和练习, 是激发学生兴趣, 好奇心, 求知欲的好方法. -- 引用自<做中学> 老师博客中注重 ...

  6. attr()、prop()、css() 的区别

    .attr( ) 可以设置元素的属性(也就是给元素新增加一个原来并不存在的属性)也可以获取元素的本来就有的属性以及额外设置的属性.如果要获取的属性没有设置,那么获取到的结果是 undefined; . ...

  7. C#中四种常用集合的运用(非常重要)【转】

    1.ArrayList ArrayList类似于数组,有人也称它为数组列表.ArrayList可以动态维护,而数组的容量是固定的. 它的索引会根据程序的扩展而重新进行分配和调整.和数组类似,它所存储的 ...

  8. golang interface判断为空nil

    要判断interface 空的问题,首先看下其底层实现. interface 底层结构 根据 interface 是否包含有 method,底层实现上用两种 struct 来表示:iface 和 ef ...

  9. Java消息机制 ActiveMQ入门实例

    转载自:http://www.cnblogs.com/wyh3721/p/5917316.html 1.下载ActiveMQ 去官方网站下载:http://activemq.apache.org/  ...

  10. MySQL 内存溢出

    select EVENT_NAME ,SUM_NUMBER_OF_BYTES_ALLOC from memory_summary_global_by_event_name order by SUM_N ...