Jquery UI震动效果实现原理及步骤

如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告，今天这篇文章将介绍怎样使你的页面中的元素震动起来。

要达到这个目的我们需要使用到Jquery和Jquery UI。
首先让我创建一个震动块，可以是图片，也可以是普通的dom元素，如div、span等，把元素的id命名为shake，这里可以任意命名。

我们用图片如下：


代码如下:

<img src="http://jqueryui.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png" id="shake"/>

Jquery UI没有现成的使元素震动的方法，我们需要借助于effect方法来实现，语法如下：


代码如下:

effect('shake', options, speed);

参数options（这里有三个参数）：
•times：指定元素震动次数
•distance：指定元素震动幅度
•direction：指定元素震动方向
下面是具体实现方法，设置震动3次，每500ms调用一次震动：


代码如下:

function interval() {
$('#shake').effect('shake', { times:3 }, 100);
}
$(document).ready(function() {
var shake = setInterval(interval, 500);
});

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
这里我引入了最新版的。
下面附上完整代码


代码如下:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script>
function interval() {
$('#shake').effect('shake', { times:3 }, 100);
}
$(document).ready(function() {
var shake = setInterval(interval, 500);
});
</script>
<style>
.body{
background: #F9F9F9;
}
h1{
text-align:center;
top:30px;
position: relative;
font-size: 36px;
line-height: 40px;
margin: 0;
position: relative;
font-weight: 300;
color: #C91622;
padding: 5px 0px;
text-shadow: 1px 1px 0px #F2F2F2, 1px 2px 0px #B1B1B2;
font-family: 'KenyanCoffeeRg-Regular';
height:70px;
}
.container{
display:table;
width:50%;
border-collapse: collapse;
margin: 0 auto;
}
.container img {
width:253px;
}
</style>
<title>jQuery Shake Effect</title>
</head>
<body>
<h1>jQuery Shake Effect</h1>
<br/><br/><br/>
<div class="container">
<img src="http://jqueryui.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png" id="shake"/>
</div>
</body>
</html>

赞 (0)

相关推荐

  • jquery实现的一个简单进度条效果实例

    jquery实现的一个简单进度条效果实例

    jquery实现一个进度条的效果,或许在这里没有什么实际的作用,但是已经实现了进度条的部分原理,前端是怎么实现那种进度效果的. 效果演示: 进度条实现源码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&qu

  • 基于jQuery实现模拟页面加载进度条

    基于jQuery实现模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A7

  • Jquery Uploadify多文件上传带进度条且传递自己的参数

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" r

  • 分享8款优秀的 jQuery 加载动画和进度条插件

    分享8款优秀的 jQuery 加载动画和进度条插件

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示 Percentage Loader 一款轻量的 jQue

  • 一个简单的jquery进度条示例

    一个简单的jquery进度条示例

    用jQuery实现的最简单的进度条,只有不到10行代码.样式可以直接忽略.(有一个图片需要自己找一下) [CSS]代码 复制代码 代码如下: $(function(){    var i=0;    (function progressBar(){ i=i+1; if(i>=101){    i=0; } $("#proc").animate({width:i+"%"},500); $("#progressWord").text(i+&qu

  • 基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)

    1. 数据 一共包含了全国3049所大学, 从人人网拷贝的 (仅供学习交流, 请勿用于商业项目), 这是一个脚本文件, 里含的JSON对象存储了学校的信息, 格式为: 复制代码 代码如下: var schoolList=[ { "id":1, //省份id "school": [ { "id": 1001, //学校id "name": "\u6e05\u534e\u5927\u5b66" //学校名称 }

  • multiSteps 基于Jquery的多步骤滑动切换插件

    multiSteps 基于Jquery的多步骤滑动切换插件

    插图:在支持Html5浏览器下观看会有更加体验 其中IE9以下版本使用滤镜模拟了一个阴影,删掉此处内容,IE下运行会更加平滑(至少我的老爷机运行更平滑了.) 第一步插图: 启动函数需要返回值,在这个启动函数里面你可以为所欲为,但是在你坏事做完之后必须返回一个值, 被发现,那你就得停下来等待处理结果,那么就返回false,无法继续执行, 没有被发现那就赶紧的离开这里,返回true,继续执行到下一步! 第二步插图:跳出的提示是第一步执行完毕之后的回调函数 回调函数没有返回值,事实上,执行回调函数的时

  • 6款新颖的jQuery和CSS3进度条插件推荐

    6款新颖的jQuery和CSS3进度条插件推荐

    现在的网页功能越来越多,尤其是AJAX的广泛应用,进度条和Loading加载动画显得越来越重要了.下面给大家介绍几款比较新颖的jQuery和CSS3进度条Loading加载动画插件,希望对大家有帮助. 1.不同进度显示不同颜色的进度条 这款CSS3进度条和别的有所不同,他的主要特点是随着进度的变化,进度条的颜色会有所改变,这个和游戏中人物的生命值很相似. 2.纯CSS3实现的彩色进度条 该进度条利用了CSS3的颜色渐变属性,让进度条的色彩显得非常具有立体感. 3.jQuery Progress

  • 基于jquery步骤进度条源码分享

    基于jquery步骤进度条源码分享

    基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效.效果图如下: 在线预览       源码下载 html代码: <div class="step_context test"></div> 当前步骤: 第<input type="text" value="5" id="currentStepVal" />步 <button onclick="

  • Jquery使用Firefox FireBug插件调试Ajax步骤讲解

    Jquery使用Firefox FireBug插件调试Ajax步骤讲解

    首先,我们用一个示例来说明JQuery的Ajax调用过程, 实现的一个功能是:点击确认支付按钮之后,实现余额支付的功能: 1.首先在php页面将相关需要调用的函数绑定到按钮上: 复制代码 代码如下: <input type="submit" name="pay_btn" id="pay_btn" value="确认支付" /> <script type="text/javascript"&

  • Jquery Uploadify上传带进度条的简单实例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" ru

  • 改善你的jQuery的25个步骤 千倍级效率提升

    1. 从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势.它节省了你服务器上的带宽,能够很快的从Google的内容分布网络(CDN)上加载JS类库.更重要的是,如果用户访问那些发布在Google Code上的站点后它会被缓存下来.这样做很有意义.有多少站点使用了没有被缓存的相同jQuery副本,而这些很容易做到,引入: <script type="text/java

  • jquery.pagination.js 无刷新分页实现步骤分享

    jquery.pagination.js 无刷新分页实现步骤分享

    1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 2.页面js代码为 复制代码 代码如下: <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $(

随机推荐