jquery 实现图片跳动。提示作用
需要做几件事:
第一:样式表定义
.red
{
border: 2px solid #ffffff;
}
第二:定义抖动函数
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&&false) {
clearInterval(t);
ele.removeClass(cls);
}
}, 200);
};
第三:定义抖动部件
<span id="msg">
@if (ViewBag.msgCount > 0)
{
<img id="msg_img" src="@Url.Content("~/Content/warning.png")" width="12" alt="loading" />
<span style="color:Red;">@ViewBag.msgCount</span>
}
</span>
第四:调用
$(document).ready(function () {
shake($("#msg"), "red", 1);
});
第五:收工
jquery 实现图片跳动。提示作用的更多相关文章
- 一款基于jQuery的图片场景标注提示弹窗特效
今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- 鼠标划过图片title 提示实现
鼠标划过图片title 提示实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- Jquery qTip2实现多种提示效果,支持ajax,以及多种样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery简单纯文字提示条
如何制作jQuery简单纯文字提示条,先介绍提示条(tooltip)的意思是用户鼠标悬停经过事件发生提示title.它们已经呈现在大多数浏览器中,当你可以提供一个链接或图片的title属性,就是用户将 ...
- Jquery实现图片瀑布流思路-简单版
目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
随机推荐
- windows下安装和配置Weka
Weka是一款免费的,非商业化的,基于java环境下的开源的机器学习以及数据挖掘软件.Weka里含有各种数据挖掘工具:数据预处理,分类与回归,聚类,关联规则和可视化工具. 一.安装weka 我们首先需 ...
- python setup.py install 失败
由于curl证书太老,所以无法找到一些对应的版本. 如下更新证书即可: curl http://curl.haxx.se/ca/cacert.pem > /etc/pki/tls/certs/c ...
- WebService学习之四:关于JAX-WS 注释
基于 XML 的 Web Service 的 Java API"(JAX-WS)通过使用注释来指定与 Web Service 实现相关联的元数据以及简化 Web Service 的开发.注释 ...
- 语义Web和本体开发相关技术
在技术实现方面,语义Web和本体理论的研究日趋成熟,已经有许多成熟的工具或程序接口,诸如Jena.OWL API等API是系统实现的关键技术.这里介绍系统的可行性分析以及系统开发设计的关键技术. 1 ...
- 从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式(二)
本文转载自 http://blog.csdn.net/cutesource/article/details/6192145 下面再来看看Tomcat是如何使用NIO来构架Connector这块的. 先 ...
- TypeScript 素描 - 模块
/* 其实前面一些都是废话,因为都和C#类似.从模块开始就需要深入的去理解了 文档反复声明了 内部模块现在称做 命令空间 外部模块称为 模块 模块在其自身的作用域里执行,而不是在全局作用域里,也就是说 ...
- iOS类别(Category)
iOS类别(Category)与扩展(Extension) 苹果的官方文档 Category在iOS开发中使用非常频繁.尤其是在为系统类进行拓展的时候,我们可以不用继承系统类,直接给系统类添加方法,最 ...
- word2007 每页显示表头
word2007 每页显示表头 在Word 2007文档中,如果一张表格需要在多页中跨页显示,则设置标题行重复显示很有必要,因为这样会在每一页都明确显示表格中的每一列所代表的内容.在Word 2007 ...
- 访问修饰符与可选修饰符static的使用
在Java中修饰符较多,在这里简单说一说几个访问修饰符的选择使用,和可选修饰符static的使用. 一.访问修饰符:这是Java里用来控制访问类及类的方法.变量的访问权限,从而达到只暴露接口,来隐藏内 ...
- javascript --执行上下文,作用域
执行上下文 顾名思意就知道他是动态的,只在代码运行的时候产生 作用域 顾名思意就知道它是一个"领域",并且这个"领域"在一开始就规划好, 不会在改, var d ...