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 相关文章推荐
jQuery学习2 选择器的使用说明
Feb 07 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
Javascript创建类和对象详解
May 31 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
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 addslashes 函数详细分析说明
2009/06/23 PHP
深入php self与$this的详解
2013/06/08 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
python实现倒计时小工具
2019/07/29 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
Python while循环使用else语句代码实例
2020/02/07 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
学校文明单位申报材料
2014/05/06 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
孔子观后感
2015/06/08 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
python字符串的一些常见实用操作
2022/04/06 Python