原文地址：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. [动态差分+二维前缀和][小a的轰炸游戏]

    链接:https://ac.nowcoder.com/acm/contest/317/E来源:牛客网 题目描述 小a正在玩一款即时战略游戏,现在他要用航空母舰对敌方阵地进行轰炸 地方阵地可以看做是n× ...

  2. js framework comparation

    starting a new project:(finance project for p2p -- like lending club, or prosper ) ,we considering a ...

  3. bash常识

    文章目录 比较是否相等 = 字符串操作 字符串变量的截取操作 字符串替换 字符串比较 取长度 查找子串的位置 选取子串 fork, exec, source fork exec source 补充 其 ...

  4. 用flask和长轮询实现对帅哥投票和实时查看票数

    flask中的代码 from flask import Flask,request,render_template,redirect,session,jsonify import uuid impor ...

  5. Match 3 小项目学习

    using UnityEngine; using System.Collections; using Holoville.HOTween; /// <summary> /// 游戏逻辑 / ...

  6. 使用 localeCompare 函数对中文进行排序

    localeCompare 函数可对中文进行排序. 性能相关 当比较大量字符串时, 比如比较大量数组时, 最好创建一个Intl.Collator 对象并使用compare 属性所提供的函数. mdn介 ...

  7. Linux 建立 TCP 连接的超时时间分析(解惑)

    Linux 系统默认的建立 TCP 连接的超时时间为 127 秒,对于许多客户端来说,这个时间都太长了, 特别是当这个客户端实际上是一个服务的时候,更希望能够尽早失败,以便能够选择其它的可用服务重新尝 ...

  8. pyhanlp 停用词与用户自定义词典功能详解

    hanlp的词典模式 之前我们看了hanlp的词性标注,现在我们就要使用自定义词典与停用词功能了,首先关于HanLP的词性标注方式具体请看HanLP词性标注集. 其核心词典形式如下: 自定义词典 自定 ...

  9. Xshell中vim退出内容仍停留在屏幕的问题

    Xshell中vim退出内容仍停留在屏幕的问题 我每次在vim中退出后内容都显示在屏幕上面,看上去特别烦,就在网上看了下,通过调试成功. 第一种方法:在xshell中设置 1.这是我在vim中退出的状 ...

  10. tgz的解压

    解压文件tgz 例如文件名为: yyyy.tgz 先使用GZIP解压为TAR文件 gzip -dv yyyy.tgz 同时解压后生成yyyy.tar文件 再使用tar解压yyyy.tar文件 tar ...