原文地址：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程序设计》第八周学习总结

    教材学习总结 线程常用方法 1.start() 2.run()定义线程线程对象被调度之后所执行的操作 3.sleep(int millsecond),必须在try-catch语句块中调用sleep方法 ...

  2. hdu1907 John 博弈

    Little John is playing very funny game with his younger brother. There is one big box filled with M& ...

  3. 滚动加载图片（懒加载）实现原理（这是旧实现，仅做为获取元素宽高api的参考）

    https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...

  4. 【git】一台机器上使用不同的git账号

    1.生成一个新的自定义名称的公钥: ssh-keygen -t rsa -C "shangxiaofei3@163.com" -f ~/.ssh/sxfself 一直点击回车 执行 ...

  5. centos7.3使用花生壳映射端口

    首先下载花生壳客户端(其实我觉得更应该叫做服务端),选择相应的版本就可,例如我就是选择的linux->centos版本的 https://hsk.oray.com/download/ 我的版本为 ...

  6. MySQL--派生表临时结果集中的AutoKey

    在某些场景中,需要对派生表生成临时结果集进行materialized,如果该临时结果集中包含索引键,那么查询有可能通过该索引键来进行优化. 如对下面查询: SELECT T2.purpose_code ...

  7. C# to IL 18 Glossary(术语)

  8. http1.1 和 http2 的协议对比测试

    http1.1 和 http2 的协议对比测试 http 协议发展了很多年,目前最为流行的是 http 2. 发现有些网站很流行的网站用的 http1.1, 询问后原来是因为有特殊用途. https: ...

  9. 自动化部署--shell脚本--1

    传统部署方式1.纯手工scp2.纯手工登录git pull .svn update3.纯手工xftp往上拉4.开发给打一个压缩包,rz上去.解压 传统部署缺点:1.全程运维参与,占用大量时间2.上线速 ...

  10. tensorflow object detection

    Follow guidelin from https://github.com/tensorflow/models/blob/master/research/object_detection/g3do ...