jQuery实现的Div窗口震动特效


Posted in Javascript onJune 09, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>jquery窗口震动特效</title> 
<script type="text/javascript" src="https://3water.com/ajaxjs/jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
;(function($){ 
var element = {}; 
$.fn.jshaker = function(){ 
element = $(this); 
element.css('position', 'relative'); 
element.find('*').each(function(i, el){ 
$(el).css('position', 'relative'); 
}); 
var iFunc = function(){ $.fn.jshaker.animate($(element)); }; 
setTimeout(iFunc, 50); 
}; 
$.fn.jshaker.animate = function(el){ 
$.fn.jshaker.shake(el); 
el.find('*').each(function(i, el){ 
$.fn.jshaker.shake(el); 
}); 
var iFunc = function(){ $.fn.jshaker.animate(el); }; 
setTimeout(iFunc, 50); 
} 
$.fn.jshaker.shake = function(el){ 
var pos = $(el).position(); 
if(Math.random() > 0.5){ 
$(el).css('top', pos['top'] + Math.random() * 20 < 10 ? (Math.random() * 20 * (-1)) : Math.random() * 20); 
} else { 
$(el).css('left', pos['left'] + Math.random() * 20 < 10 ? (Math.random() * 20 * (-1)) : Math.random() * 20); 
} 
} 
})(jQuery); 
</script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.block').click(function(){ 
$(this).jshaker(); 
}); 
}); 
</script> 
<style type="text/css"> 
BODY{font-family: "Lucida Grande", Arial, Helvetica, sans-serif;color: #666666;font-size: 12px;background: #FFFFFF;} 
A{color: #0A8ECC;} 
A: HOVER{text-decoration: none;color: #8FCB2F;} 
H1{font-weight: normal;color: #0A8ECC;margin: 0;padding: 0;} 
BODY{margin: 20px;padding: 20px;} 
STRONG{color: #000000;} 
.vspacer{height: 20px;} 
PRE.code{padding: 7px;background: #777777;color: #F0F0F0;width: 400px;overflow: auto;} 
#content-area{border: 3px solid #CCCCCC;background: #F0F0F0;padding: 10px;width: 500px;} 
P.script-link{clear: both;padding: 10px 0;border-top: 1px dotted #CCCCCC;} 
#content .block {float: left;border: 1px solid #CCCCCC;background: #F0F0F0;padding: 10px;margin: 10px;width: 300px;} 
</style> 
</head> 
<body> 
<div id="page"> 
<h1>jquery窗 口 震 动 特 效</h1> 
<div id="content"> 
<div class="block"> 
<p>点击本框内,可实现震动</p> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li> 
Item 3 
<ul> 
<li>Sub Item 1</li> 
<li>Sub Item 2</li> 
<li>Sub Item 3</li> 
<li>Sub Item 4</li> 
<li>Sub Item 5</li> 
</ul> 
</li> 
<li>Item 4</li> 
<li>Item 5</li> 
</ul> 
</div> 
<div class="block"> 
<form action="#"> 
<p><label for="inp1">Text Field 1:</label><input type="text" name="inp1" id="inp1" value="" /></p> 
<p><label for="inp2">Text Field 2:</label><input type="text" name="inp2" id="inp2" value="" /></p> 
<p><button type="submit">Submit</button></p> 
</form> 
</div> 
</div> 
<p class="script-link"> 
</p> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
js转html实体的方法
Sep 27 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
js动态创建标签示例代码
Jun 09 #Javascript
jquery中 $.expr使用实例介绍
Jun 09 #Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 #Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 #Javascript
js判断元素是否隐藏的方法
Jun 09 #Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 #Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 #Javascript
You might like
PHP安全编程之加密功能
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python判断Abundant Number的方法
2015/06/15 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
remote接口和home接口主要作用
2013/05/15 面试题
幼儿教师思想汇报
2014/01/10 职场文书
护理不良事件检讨书
2014/02/06 职场文书
安全生产大检查方案
2014/05/07 职场文书
太行山上观后感
2015/06/05 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
Python实现简繁体转换
2021/06/07 Python
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电