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


Posted in Javascript onFebruary 04, 2013

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

要达到这个目的我们需要使用到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>
Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
vue3.0 上手体验
Sep 21 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 #Javascript
实现局部遮罩与关闭原理及代码
Feb 04 #Javascript
js实现网站首页图片滚动显示
Feb 04 #Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 #Javascript
js网页中的(运行代码)功能实现思路
Feb 04 #Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 #Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 #Javascript
You might like
十天学会php(2)
2006/10/09 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python 元组操作总结
2019/09/18 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
Java编程面试题
2016/04/04 面试题
党校自我鉴定范文
2013/10/02 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
2014学年自我鉴定
2014/02/23 职场文书
法制宣传实施方案
2014/03/13 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python