java星星闪烁代码_jQuery实现仿QQ头像闪烁效果的文字闪动提示代码

本文实例讲述了jQuery实现仿QQ头像闪烁效果的文字闪动提示代码。分享给大家供大家参考，具体如下：

jQuery 闪动的文字提示，仿QQ头像闪烁闪动提示，可以用于错误提示或其他吸引用户注意力的场合。

shake(ele,cls,times)

ele : jQuery Object [object] 要闪动的元素

cls : Class Name [string] 闪动的类

times : Number [Number] 闪动几次

注意，必须调用jQuery1.4.2及以上版本，否则网页下角会提示错误。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

QSL 社区闪动提示

*{ 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;}

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);

}

);

});

闪动提示，可以用于错误提示或其他吸引用户注意力的场合

shake(ele,cls,times)

ele : jQuery Object [object] 要闪动的元素

cls : Class Name [string] 闪动的类

times : Number [Number] 闪动几次

打开就闪动

点击就闪动

希望本文所述对大家jQuery程序设计有所帮助。

java星星闪烁代码_jQuery实现仿QQ头像闪烁效果的文字闪动提示代码相关推荐

android人脸识显示头像自定义,Android 仿QQ头像自定义截取功能
看了Android版QQ的自定义头像功能,决定自己实现,随便熟悉下android绘制和图片处理这一块的知识. 先看看效果: 思路分析: 这个效果可以用两个View来完成,上层View是一个遮盖物,绘制 ...
Android：高仿QQ头像截取升级版
观看此篇文章前,请先阅读上篇文章:高仿QQ头像截取: 本篇之所以为升级版,是在截取头像界面添加了与qq类似的阴影层(裁剪区域以外的部分),且看效果图: 为了适应大家不同需求,这次打了两个包,及上图 ...
安卓高仿QQ头像截取升级版
观看此篇文章前,请先阅读上篇文章:高仿QQ头像截取: 本篇之所以为升级版,是在截取头像界面添加了与qq类似的阴影层(裁剪区域以外的部分),且看效果图: 为了适应大家不同需求,这次打了两个包,及上图 ...
android 高仿qq,Android高仿QQ头像截取
花费了半天时间,把仿QQ头像截取的方法整理了下,并制作了一个demo以供大家参考,基本上实现了qq中我的资料界面上(包括背景透明化,上滑标题栏显示,下拉隐藏等)的大致效果,先上图看效果吧: 支持的功 ...
Android：高仿QQ头像截取
花费了半天时间,把仿QQ头像截取的方法整理了下,并制作了一个demo以供大家参考,基本上实现了qq中我的资料界面上(包括背景透明化,上滑标题栏显示,下拉隐藏等)的大致效果,先上图看效果吧: 支持的功 ...
仿QQ头像透明圆图剪切（CAShapeLayer 和 UIBezierPath的使用）
最近,研究了一下仿QQ头像透明圆图剪切,参考了一下code4App上一位大神的源码. 下面,把一些具体的思路写下来以助记忆,毕竟好记性不如烂笔头. 首先,用到了CAShapeLayer 和 UIBez ...
java通讯课程_Java项目实战-仿QQ即时通讯软件视频课程
1.学习JAVA的Swing做UI设计, 2学习用JAVA语言进行数据库编程,熟练使用Connection,Statement,PreparedStatement,ResultSet等数据库类库: 3 ...
java如何开发游戏大厅_java仿qq游戏大厅的设计与实现
摘要:由于生活节奏的越来越快,人们越来越少的外出游玩.现在的人们为了生活,为了工作,为了家庭无时无刻不在紧张的环境中度过.而一些简单的小游戏则成为了人们放松的主要方式,本文用java语言开发了客户端/ ...
java怎么实现发布说说_仿QQ发表说说
[实例简介]android 仿QQ空间发表说说和选择图片功能 [实例截图] [核心代码] pop = new PopupWindow(MainActivity.this); View view = g ...
android的动态tab,Android自定义view仿QQ的Tab按钮动画效果(示例代码)
话不多说先上效果图实现其实很简单,先用两张图一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...

java星星闪烁代码_jQuery实现仿QQ头像闪烁效果的文字闪动提示代码

java星星闪烁代码_jQuery实现仿QQ头像闪烁效果的文字闪动提示代码相关推荐

最新文章

热门文章