原文地址：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. 实验吧—隐写术——WP之 SB！SB！SB！

    我们先打开解题链接,里面是一张愤怒的小鸟里的小猪~ 既然这是隐写题,那么肯定要把图片下载下来进行分析咯~ 下载下来之后,我们看到题目中提示:LSB 什么是LSB? LSB(Least Signific ...

  2. Java 如何实现线程间通信？（notify、join、CountdownLatch、CyclicBarrier、FutureTask、Callable ）

    转自:https://mp.weixin.qq.com/s?__biz=MzI4Njc5NjM1NQ==&mid=2247486499&idx=1&sn=d3f2d6959df ...

  3. powerdesigner基本使用

    parent sonPK主键 FK外键 n ------> 1 alter table muniubox.cpa_accounting_book add constraint FK_Refere ...

  4. LeetCode - Two Sum IV - Input is a BST

    Given a Binary Search Tree and a target number, return true if there exist two elements in the BST s ...

  5. 【spring源码分析】spring关于循环依赖的问题

    引言:循环依赖就是N个类中循环嵌套引用,如果在日常开发中我们用new 对象的方式发生这种循环依赖的话程序会在运行时一直循环调用,直至内存溢出报错.下面说一下Spring是如果解决循环依赖的. 第一种: ...

  6. nginx unit 1.8 支持基于java servlet 的开发模型

    最近unit 1.8 发布了,有两个比较大的新特性,内部请求路由,以及java servlet 容器应用的开发 内部请求路由配置参考 { "routes": [ { "m ...

  7. 原生js实现ajax用于简单的签到或登录

    <script> function createStandardXHR() {     try {         return new window.XMLHttpRequest(); ...

  8. Mysql主从---删除master.info和relya-log.info实验

    relay-log.info, master.info 这连个文件时在建立复制时产生的,现在主要说明以下问题: 1.如果修改删除master.info文件,复制会中断么? 不会,如果stop slav ...

  9. 【转】C#获取当前日期时间(转)

    我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日期+时间(2008-09-04 12 ...

  10. 查看hp小型机命令集

    查看HP小型机的信息的命令集(一) 1.机型 #model 9000/800/L2000-44 注意:其中44是指每个cpu有440MHZ. 2.cpu个数 #top CPU LOAD USER NI ...