如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告，今天这篇文章将介绍怎样使你的页面中的元素震动起来。
要达到这个目的我们需要使用到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);
});
在此之前需要先引入Jquery和Jquery UI
<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>
这里我引入了最新版的。
下面附上完整代码
<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>
分享到：
相关推荐
总之，通过上述步骤可以实现JQuery UI震动效果，提升网页元素的交互性和视觉吸引力。使用此效果时，也需要注意用户体验的合理性，避免过度使用引起用户反感。同时，考虑到页面性能和兼容性，在不同的浏览器中测试...
总的来说，jQuery UI项目通过提供一套完善的UI组件和效果，极大地推动了Web界面开发的进步，降低了开发复杂度，提高了效率，同时也为用户带来了更加生动和友好的交互体验。随着项目的持续发展，我们可以期待更多创新...
这些可以通过连续改变元素的位置和旋转角度来实现，比如`animate()`和`setTimeout()`的组合使用，创建出有节奏的震动效果。 最后，我们看到“jquery-ui-1.8.16.custom-core.zip”，这是jQuery UI库的一个版本，它...
这些效果可以用于各种交互反馈，例如商品添加成功后，购物车图标可以震动一下，或者购物车总价变化时，总价数字可以使用`pulsate`效果吸引用户的注意力。 8. **文件结构与示例**： 提供的`Shopping cart demo - ...
果冻抖动效果，顾名思义，是一种视觉上的震动效果，它使得网页元素在鼠标悬停或触碰时产生一种弹性的振动感，这种效果可以吸引用户注意力，提升用户体验。 为了实现这一效果，jQuery的animate方法是关键。此方法...
3. **底部弹出效果**：该代码实现了点击后从底部弹出下拉框的效果，这是通过CSS变换（如`transform`）和jQuery的动画功能来完成的。这种动画效果有助于吸引用户的注意力，并明确表示有新的操作区域可用。 4. **...
- 提供视觉和触觉反馈以增强用户体验，如滑动时的动画效果，以及滑动完成后的一次小震动。 7. **无障碍性（Accessibility）**： - 考虑到无障碍性，为滑块添加`aria-*`属性，以便辅助技术理解其功能。 - 添加...
2. **JavaScript动画**：JavaScript库如jQuery、GSAP或自定义脚本可以实现更复杂的交互式动画，包括时间线管理、物理模拟等。 3. **SVG动画**：对于矢量图形，SVG可以内嵌动画，如路径移动、形状变换等，适合创建...
"jquery UI 数字时间以及天气预报"结合了jQuery与UI库，提供了实时更新的数字时钟和天气预报功能。通过优雅的动画展示，使用户能够方便地获取时间和天气信息，同时增强页面的互动性。 "菜单特效"是前端开发中常用的...
- **JavaScript/jQuery**：用于动态显示和隐藏消息提示，以及响应用户交互。 - **CSS3**：实现动画效果，如提示框的淡入淡出，增加用户体验。 - **HTML**：构建消息提示的结构，包括文字、图标等元素。 4. **...
在技术实现上，日历控件可以使用各种编程语言和框架构建，例如JavaScript（配合jQuery或React）、Java（在Android平台上）、Swift（在iOS平台）或者.NET框架。对于前端开发，可能会使用HTML5的`<input type="date">`...
5. 动画与效果：为了提升游戏体验，可能使用了CSS3动画或者JavaScript库（如jQuery）来创建过渡效果和动态视觉反馈，如点击后的震动、闪烁等。 6. 函数和模块化：为了保持代码的整洁和可维护性，开发者可能使用了...