原文地址：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. C# 敏捷1

    using System; using System.Collections; using System.Collections.Generic; using System.Diagnostics; ...

  2. python django day 2

    django-admin.py startproject zqxt_viewscd zqxt_viewspython manage.py startapp calczqxt_views/urls.py ...

  3. （12）模板语言-with

    with的用处 当一个变量特别特别长,可以用with给这个变量重命名 views.py from django.shortcuts import render,HttpResponse def ind ...

  4. java.lang.IllegalArgumentException: An invalid domain [.test.com] was specified for this cookie

    https://blog.csdn.net/cml_blog/article/details/52135115 当项目中使用单点登录功能时,通常会使用cookie进行信息的保存,这样就可以在多个子域名 ...

  5. centos7 添加第三方源

    第三方源下载地址: http://repoforge.org/use/ 选择合适自己包 我选择的是EL7的 wget 下载这个包 接着使用rpm -ivh 包名 确认是否添加成功 ls /etc/yu ...

  6. s3c2410串口笔记

  7. git push文件到远程github或者gitlab

    Git global setup git config --global user.name "luozeng" git config --global user.email &q ...

  8. 不同eclipse版本的git库使用

    在eclipse 4.4.2 -win32版本下编译好后上传版本: 1.在eclipse 4.4.0 -win64 版本下,编译报 缺少 sevlet.http...库,解决方法  project - ...

  9. hanlp在Python环境中的安装失败后的解决方法

    Hanlp是由一系列模型与算法组成的javag工具包,目标是普及自然语言处理再生环境中的应用.有很多人在安装hanlp的时候会遇到安装失败的情况,下面就是某大神的分享的在python环境中安装失败的解 ...

  10. hadoop需要哪些技术支持

    hadoop是一个开源软件框架,可安装在一个商用机器集群中,使机器可彼此通信并协同工作,以高度分布式的方式共同存储和处理大量数据.最初,Hadoop 包含以下两个主要组件:Hadoop Distrib ...